Home / Taxonomy term

Webinar

Accomplishing Your Marketing Goals with Drupal 8 [May 6, 2014]

Click to see video transcript


Hannah Corey: Today’s webinar is Accomplishing Your Marketing Goals with Drupal 8. We’re really excited for this webinar, and we want to thank Appnovation for co-hosting it with us. The presenters today are Jonathan Whang who’s the Lead Developer at Appnovation and Kris Vanderwater who’s a Developer Evangelist here at Acquia. We’re really excited for both of them to take time out of their day today.

Jonathan Whang: Okay. Hi everybody. My name is Jonathan Whang, and I’m a Lead Developer with Appnovation Technologies. Appnovation is one of the world’s leading open source development shops with over 150 clients and having delivered nearly 400 projects since our inception. We have six offices in total and each location and the headquarters are in Vancouver BC, with our US operations run out of Atlanta and our EMEA operations run from London, UK. Through these offices, we have been able to serve companies around the world. Some of the technologies we use and solutions we provide include Drupal, Alfresco, SproutCore, HTML5, Mobile Apps, MuleSoft, Jaspersoft, MongoDB, Hadoop, and various e-commerce solutions. Some of our more notable clients include the NBC Universal, Intel, Pfizer, the NBA, Google, Fox News, American Express, Reebok, Samsung and also the US Department of Defense. We have a very strong partner relationship, and Appnovation is the only company in the world that is both an Enterprise Select Acquia partner, MuleSoft partner and a Platinum Alfresco partner. Just to give you guys an outline of what we will be discussing today, we will be talking about how Drupal 8 is different from Drupal 7, and how these will help achieve your marketing goals. So, the three main points we are going to discuss today are Web Services in Core, and What You See Is What You Get Editor in Core, and some New Functionality. With that I’m going to pass you over to Kris, and he’s going to talk about the Web Services in Core.

Kris Vanderwater: Thanks. Very quickly, I’ll just tell you a little bit about myself so you know who’s talking to you. I’m Kris Vanderwater. I am Acquia’s new Developer Evangelist. I was actually one of the initiative owners for Drupal 8 and have worked very heavily in blocks and lay ups and a number of other areas in Drupal 8. Just to help push things forward there, you can’t do much in Drupal Core without putting your hands dirty everywhere. I’ve done quite a bit of web services work during my time at various other companies that I’ve worked for and with that I’m just going to take you through some of the things that you’re likely to see from a web services perspective in Drupal 8.

First, I just wanted to talk for a minute about some of the problems that Drupal 8 is trying to address. During his Keynote at DrupalCon Portland, Dries presented a slide that indicated that 70% of respondents in a large survey told that providing an optimal experience across all screen sizes and devices was a source of major, major difficulty. Of those survey, only 11% of their organization had actually embraced a “mobile first” solution, and 33% of those wants the “responsive design” features in their CMS immediately. This is of course very relevant to marketing. A large number of devices and screen sizes means that catering to your site to everyone is harder than ever and your message could be lost simply because of the device only shows with you and your site. Now, a good responsive design solution that embrace the version include the differences in devices and allow you to communicate more clearly based upon the device that someone’s using. Drupal 8 is actually taking great strides toward this goal. It’s prioritized the need for the Drupal browsing in a number of different way, including a dedication to a mobile first browsing solution. Today we’ll be giving you a peek into how the solution that reference these issues beyond just its mobile first focus, and so that would be booked into web services. Web services is normally a dry topic, but I’m going to quickly give you upfront foundations about what we’re going to talk about here. Out of the Drupal 7, web services have been available to us for quite some time. This is especially helpful when we consider any interaction with a third-party system, such as another website or a native mobile application. Leveraging web services is really the go-to solution for this problem space. Scripturally in Drupal 7, there were a number of problems with this. Primarily the most major problem was the Drupal 7’s route handling wasn’t built with this in mind. This is a technical way to say that D8 modules have to spend an awful lot of time and effort hacking around what Drupal was trying to provide by people. So, they created a number of different solutions that would basically work but the best practice is that the world at large is following weren’t necessarily being followed in Drupal 7. To this end, most common solution in Drupal 7 was actually to leverage the services module, and now Services is really great module but it has a couple of drawbacks, and primarily in a [audio gap] developers needed to create any sort of custom, what we call entities or data storage mechanism. They would have to create an awful lot of additional codes just to do any communication with a third-party app or another website. This of course meant more work for your developers over a longer period of time and likely would result in ongoing troubleshooting as well. In an effort to remedy this, many attempts were made in Drupal 7 to do entity generic services. This ultimately emerged as a really powerful pattern, but it took a long time for Drupal 7’s cycle to probably establish this pattern.

Now moving forward to Drupal 8, it’s embraced this approach that was ultimately achieved in Drupal 7 since day one. Another two different types of speed and we’re only going to really talk about one of them here. It’s what we referred to generically as consent entities. Is there anything that you can add a field to? If you’ve ever actually worked with Drupal 8 and seen nodes you can add additional fields to, you have an idea of what it is that I’m talking about here. This could be things like nodes or users, comments. If you’ve ever worked with Drupal Commerce, maybe products, line items, orders, all those sorts of things that you really are the very powerful Core of Drupal. These entities come out of the box. can be activated per entity and for those of you who are not familiar with this approach, this is really just a general way for you to communicate externally about this data. Very, very powerful, again, for any sort of third-party application and useful for maybe the iPhone or an Android phone, something along those lines.

To this end, Drupal’s invested very heavily in various types of data serialization. Now, this is a really technical topic, and I’m not going to talk about it. Suffices to say that your developers will really appreciate the effort that got into this because it means that your data can be passed around and the format that will work per situation. What we like to call “CRUD” within the industry, which stands for Create, Read, Update or Delete is also a basic part of the entity services that have gone into Drupal 8. This will give your developers a really robust framework from which to begin working. That’s going to dramatically reduce the amount of troubleshooting that they’re probably going to need to do for custom entity types and allow them to really focus in on building an API that works for your specific use case. When we begin talking about building a third-party solution in a native application, focusing in on what the API should really look like is really where your developers should be spending their time, and it’s ultimately what’s trying to give your application the best foot forward and be able to communicate with your target market more quickly, more accurately and more relevant. So with that, we’re going to be talking a little bit about – I guess I actually covered this slide. [Laughter] In short, it’s just going to make your life a whole lot easier in terms of really getting your product out there and communicating with your audience. With that, I’m actually going to hand it back over to Jonathan.

Jonathan Whang: All right. Thanks, Kris. Now, what I’m going to talk about is the functionality which we refer to as “WYSIWYG” or What You See Is What You Get and how that is now packaged in Drupal 8 Core. Just in case we’re trying to stay away from being too technical on this webinar. The What You See Is What You Get is just the editor for large text areas that allow content administrators or site users who have access to create content. They have the ability to upload images and post hyperlinks and big snippets of text and do formatting with the text area to have it show up the way they would prefer it to show up when they’re looking at HTML. That’s why the term “What You See Is What You Get” was coined. What we are used to within the Drupal 7 world is after the latter stages of Drupal 7, there has been a consolidated WYSIWYG contributed module that was developed. The module itself served as the backbone for WYSIWYG implementation, and it could support all the other plugins that allow users to select from different flavors of the actual editor and some of these plugins are CKEditor, FCKeditor, jWYSIWYG, NicEdit, TinyMCE, YUI Editor and if this doesn’t really sound familiar to you, then it’s likely because some of these plugins aren’t very popular because they don’t work very well. Actually, CKEditor had gone on and produced their own standalone module that some sites would use where they don’t like the flexibility of the actual global WYSIWYG module. Some of the benefits of this is - it is highly configurable. So, each editor can have its own settings and you can choose what buttons would show up. If you refer to the slide and the area that is encased in the red border is the sample of what the tool bar would like customized. So, you could pick what kind of button shows up there. Think of it as like a Microsoft Word toolbar, which gives you things like bullet points and lists. Also, each text format that you would create – so text formats are customizable within Drupal. If you create that, then they can have their own editor. So, different fields would look different based on configurations of a site. This is what it is in Drupal 7 and if you guys have used Drupal 7 sites, then you would know how it works.

Some small issues with the current implementation: downloading the module, getting the editor plugin library setup with all the correct files and the latest versions and configuring all of the settings that each plugin needs takes time. Each plugin also has settings along with - the text format also has settings. A drawback to being super configurable is it also takes time to actually get up and running because once you put in the plugin and the module, it comes with bare-boned settings. It assumes that it starts off empty and you’ll have to configure it with the things that you want. Another problem we found is throughout usage of the WSYIWYG module for all the sites that we’ve been delivering is certain pieces of the WYSIWYG are inconsistent. Of course, it comes out looking like a paragraph with line breaks and bullet points and bold here and there when you’re configuring it within the text editor, but the moment you save the node and look at it on the node view page, it starts looking funny. Most of the time, it’s because the WYSIWYG was misconfigured but again, some of it also attributes to the incompatibility between the plugin and the actual core module.

Also, image upload has been inconsistent. At the beginning of Drupal 7 from what I remember was that not all of the plugins would support very clean image uploading. I believe now the CKEditor does it, but doesn’t really do it very well and you don’t have much control over where the image goes and if it’s right aligned, it doesn’t show up as right aligned after the node is saved. These are some of the issues that we would run into, especially if you are a builder of Drupal sites. With Drupal 8, now they decided that the page – because pretty much every site has a page node and we’d like to ship the WYSIWYG within the core distribution. So, they decided because I believe CKEditor was the one that was more flushed out and stable that they decided to put the CKEditor plugin directly into Core. So, it is pre-configured with four text formats, and the way that it’s set up is actually easier to understand than in Drupal 7. They have updated the interface for configuring the editor toolbar. It looks really slick and image upload support has been basically finalized, and it’s really stable even at this stage of Drupal 8. That is the WYSIWYG and Core. That’s the change that they made.

What does this mean for marketers really? The number one users for the WYSIWYG portion of a site end up being the end client, and so non-technical staff will find it easier to use with the current WYSIWYG implementation in Drupal 8. You’ll get less calls to the IT department saying, “How come this paragraph doesn’t look the way I want it to?” It does save time on site development and having site builders have to choose between different WYSIWYGs providers and they might not have experience with other plugins, but if the client sees that and they prefer that then the site developer might have a hard time with configuring the preference of the client. The unified WYSIWYG interface would mean that everyone basically is forced to use the standard. It does work right out of the box so there really isn’t much reason to switch to other plugins, which is still yet to be seen if other plugins will adopt a Drupal 8 support. If it’s consistent output for right when the site gets set up like you could set up Drupal 8 and right out of the box just have a plain page node and start like a simple blog site, then the WYSIWYG configuration works right out of the box without having to configure anything. We will have a demo at the tail end of this presentation to show you how the current WYSIWYG editor works.

Onto the new functionality that we chose to discuss for this webinar that we feel applies most to the marketing side of things. The new functionality for Drupal 8 is the in-line field editing. What this does is it gives users the ability to edit nodes directly on the view page. What that means is when you’re looking at an article and if you have permissions to make edits to content and also, you can configure this in the back end of Drupal. You can actually go in and without having to go to the edit form, you would be able to in-line edit the text and the field values right from the node view page. It has the access restriction configuration out of the box, so if you guys have dealt with configuring that huge permissions screen or form, there is already setting there to allow you to setup which roles have access to do the in-line editing. The interface is super clean and really slick and again, you’ll get to see this in the demo. It works for all content types. If you create a custom content type – so it’s not restricted to just the page node. If you create custom content types like a Wiki, or things like that, this in-line editing functionality will be available to your content type as long as it uses the field API.

So, why is that important? Well, it allows for easier access to modify content and it does reduce the clutter of the previous Drupal 7 administrative interface, so certain people will be less onto the form site or the administrative theming of Drupal. You will really just modify the content right when you’re looking at it. It also allows for ease of use on mobile, and so that ties in with like the mobile initiative of Drupal 8.

With that being said, I think we’ll move on to the demo portion where I can show you the WYSIWYG in action and the in-line editing in action. I’ll have to share my screen. In my screen, I have a Sandbox Drupal 8 installation on my machine, and this is an example of a page node that I’ve created and I just named it “First test page” and it’s full of lorem texts. So, I’m going to show you the WYSIWYG in action. If I go into edit this page node – I’m sorry. I should first take you to the configuration that it looks like out of the box. Under the administrative form, you’ll notice that this is already pre-configured for you the moment you turn on Drupal 8. Like you installed Drupal 8 and this is what it’ll look like. There’s nothing else to be done here. You don’t have to configure anything, and the roles are standard. It means basic HTML versus restricted HTML, so this is the more open text format versus where you’re allowed to restrict HTML and this one is every HTML possible and then there’s just plain text which has security issues but that’s a different discussion. All of this configuration is out of the box and you don’t have to do anything to it the moment you install Drupal which is great for site builders. So, this is what the WYSIWYG looks like without being configured to add any buttons in it, and you’ll notice it’s identical to the screenshot on the slide that I did show earlier. I’m going to take you through – I’ll increase this. So, what I have is an example, I’m going to add some text here. Right. It’s easy enough to say this is basically – the idea is it’s supposed to be easy for you to create content this way and you would copy and paste directly from Word into this. This indent here is an example of blocked quote and I’ve just made this bold, so I’m going to go down here and just go save. So the WYSIWYG, it looks exactly the way you’ve typed it in, which is how it should be working in the first place. This is an example of having the list items and a link to an external site. The configuration for the WYSIWYG, I’m going to take you through that for basic HTML. Now, you’ll notice the interface for this is much cleaner and if your clients – you’ve been given access to modify this directly by your site builders, then you’ll know that the previous way was this huge form with a whole bunch of check boxes that you would need to check. You’d have to know what they all meant in order to be able to configure the toolbar. Wherein in this case, you have the items right here and they tried to make it look like a Microsoft Word toolbar. So if you wanted to put things in like cut, then you would just drag this into, let’s say one of the groups. Let’s put that there and that’s what the interface looks like for configuring the toolbar. It’s a lot cleaner and it’s easier to use for non-technical users. I love it too even being a developer because it’s just really slick. So, that’s the WYSIWYG editor in Core and again, this is everything you get the moment you install Drupal 8. There is no need to re-configure this at all and it just works.

I’m going to take you back to my sample page node, and I’m going to demo the in-line editing. You’ll notice when you hover over the body text of the page, there’s going to be this little pencil, it looks like right at the top right-hand corner. Mind you, I am logged in as an administrator who has permissions to do this. That won’t always show up. Right now with the black toolbar, you can notice I am an administrator with privileges. This will show up, and I will just click Quick Edit. Now, you notice there’s this fancy little pop-up that shows up, which outlines which field I’m on. If I click into the field, then notice how the WYSIWYG also pops up. I’m going to, let’s say delete all of this text that I put in because that’s just cluttered, and I’m going to let’s say, make this a italicized, and I’m going to click save. So voila. No need to go into that administrative form, the WYSIWYG does show up in the in-line editor. You could still make use of that even from this site, and it’s a lot quicker to do text edits when you’re browsing through a site. Imagine the usability of this when you’re trying to comb through a whole bunch of forums or a listing of blog posts. You wouldn’t have to go in to each blog post edit form and make your changes if all you’re doing is just checking copy and checking spelling or fixing formatting. This also works for a custom field. Notice I have a different field down here, sample text field. If I click the Quick Edit, and I go in and notice how it says, “Sample text field” as my field now instead of the body. I’m going to say, “Hello again, everyone” and save. It does update that field. So it’s really slick. This allows users to basically have an easier time curating their content and no need for technical and again, all of this stuff works right out of the box. I believe I did miss the image, uploading an image. This is the image uploading for the WYSIWYG. Notice how a lot of this configuration comes out of the box. [Pause] You can add the alternative text in-line. Say, this is the demo. Specify your image height to 200 by 200 and say it’s left-aligned. That’s what it’ll look like and if you notice how it pushes all the text over - because it’s left-aligned. It pushed all the texts over and it’s left-aligned and the image is right there to where you decided to put it. So, it looks just like really when you upload, and it lets you do changes to it. I think that’s going to be it.

I guess in conclusion, this webinar was supposed to introduce people to the benefits of using Drupal 8 and how it applies to – some of the functionality of Drupal 8 would apply to having marketing initiatives. It will allow you to access a wider market because it makes things easier to curate for non-technical users. It does lower the cost to configure certain sites because a lot of the functionality that we find that are common to projects that clients come to us with are already being rolled into just the Core Drupal installation. Also, they have made an emphasis on cleaning up the administration side of Drupal because they wanted to make it as friendly as possible for people to be able to manage their site without having to always call their developer or their IT people, because right now, all the rage is mobile. We tried to ensure that Drupal 8 does accommodate for having mobile as the number one priority in terms of some of the clients’ requirements. I’m going to pass it back to Hannah.

Hannah Corey: Sure. If anybody has any questions could you please ask them now. I know a couple of comments. We can jump right into those. The first question is, can you talk about performance? I’ve heard the services module had some pain scaling.

Jonathan Whang: [Pause] Did I speak to that?

Hannah Corey: Kris, maybe you could take a stab at that one.

Kris Vanderwater: Yes, I was talking but I think I was muted.

Hannah Corey: Oh. [Laughter]

Kris Vanderwater: Yes. One of the things about Drupal 7 and I made some allusions to this earlier, Drupal 7’s notion of what a URL looks like. It’s very different than what Drupal 8’s notion of that and how it’s handled underneath the hood. There are definitely some potential performance implications there because in terms of what it is that you’re actually serving out, you have to do Bootstrap Drupal each time and well that then used to be true in Drupal 8 as well. A lot of effort has gone into streamlining that process where possible. Now, don’t get me wrong. Drupal 8’s not faster than Drupal 7 yet, and there’s going to be a lot of effort that’s going to go into it from a performance perspective. But, I think the more important takeaway here is just that Drupal 8’s notion of what a response should look like is just very, very different. Hopefully, we can begin to leverage some better caption strategies on top of it that we could have in Drupal 7. Just speak very specifically to the issue Services might have had. I’m not going to attempt to do that because I think probably very specific to whatever the used case was at the time. Obviously, if you use a system that’s getting hundreds of thousands of requests coming across it like you might have let’s say, a third-party app that gets very popular, that’s going to be a very different situation than if you have an external API that gets to - used via handful of other services out there. So, it’s hard to really nail down exactly what that might be without knowing specifically what it was that you had heard about. But, I think the takeaway should probably just be that a lot of thought and effort has gone into what this should look like for Drupal 8. Hopefully, a lot of these situations be either remedied or have a remedy close or end by virtue of the architecture.

Hannah Corey: Great. Thanks, Kris. The next question is, can you insert images from the in-line editor?

Jonathan Whang: Yes. Whatever was on the WYSIWYG – this is Jon. Sorry. Whatever was on the WYSIWYG on the full form, shows up within the in-line editor as well. So, you can use that. When I did try and play with it, it would do the insert, but I did find some funny behavior like if you tried to right-align it, it wouldn’t go all the way to the right or sometimes push certain things to the left. Again, that’s basically a by-product of it being still within latter stages with Alpha pre-beta. So, I’m sure they’ll work out the kinks for that. But yes, you can use the in-line editor to also upload images via the WYSIWYG within the in-line editor.

Hannah Corey: Awesome. Thank you. The next question is, when you use the view source on the editor, does it keep the indentation you set or does it recognize and validate the code in some other way?

Kris Vanderwater: If you’ve used the source for – depending on the text format that you have selected obviously, it’s going to validate based on that. So, if you’re using a restricted text format – let’s say the site has you configured as the blogger user role, and they only allow you to put in p tags and span tags. You can’t go in there because you only have access to that text format, even if you do view source and try to add in image tags when you don’t have access to that or dupe tags or script tags and you don’t have access to that, then the validator will take care of it. I think that’s also a security issue that they made sure they didn’t allow any holes with that. I think they also outline within the configuration section of the Drupal 8 text formats that giving access to unrestricted HTML to certain users is a security issue. It’s not a bypass by any means but if you do know how to write code, it’ll let you put in the tags that you’re initially allowed even without writing the tags manually. But, it’ll stick to the same formatting. I believe the alignment and the margins and the padding are all a by-product of the current theme you have using. So, if it formats Ps while using the – I can’t remember off the top of my head what this theme is. The Bartik theme. Sorry. If the Ps are formatted with the Bartik theme to have margin up and down then if you put Ps in there, it’s going to use the same CSS as the theme we’re using.

Hannah Corey: Great. The next question is, I like the built-in editor. Is there a function within Drupal that identifies the user customer, example by IP address in order to serve up customized content? I think Kris, you can talk to Acquia Lift about that.

Kris Vanderwater: Yes, so just to address that really directly for a second, as part of the initiative that I was an owner of the Blocks and Layout Initiative, we went to a lot of effort to begin doing that stuff. I just can tell you that as of today, those sorts of features are not in Drupal 8. Our objective was to make adding those things a bit here. However, Acquia does have a solution for some of this stuff in Drupal 7 called Acquia Lift. I believe we have an upcoming webinar on that. Don’t we, Hannah?

Hannah Corey: Yes, we do. I can send that in the chat section if you guys want to check it out. Thank you. [Pause] Awesome. Thanks, Kris. The last question [Laughter] that everyone is thinking, when is Drupal 8 launching? I know we don’t have a direct date, but maybe you guys could speak to timeframe for everyone out there that’s not that familiar with Drupal.

Kris Vanderwater: Well, the age old answer to that question is when it’s ready. That has been the status quo since I’ve been involved in Drupal, which has been about nine years now. I know that that’s not a very satisfying answer. Let’s just speak realistically for the moment. I think we are in the late stages of an alpha, and part of what we’re trying to do at any given time is to really reduce the number of outstanding issues, our tests are all always passing and that we have all the – we know that we need. This is in an effort to make the beta and the release phases of Drupal 8 as short as possible. However, there are still a handful of features that are being polished or being added to Drupal 8. I would be very surprised to see a beta in the near term future. I think that there’s probably some desire to push that out just a little bit further. If we do see a beta in the near term future, then the objective will be to really limit the scope of any new features that are being added to Drupal 8. To that end, I think there is going to be a lot of communication about what our minimum, viable product is for any given set of features that are in Drupal 8. I know the entities with them can somewhat be – some of the rest works that we discussed here today is still a little bit in flux, and there’s a real desire to make sure that those things go out as feature complete capable as possible. I wouldn’t get too fired up about being a Drupal 8 beta in the next month or two. I’m just thinking it is going to be a bit longer than that before we see a beta, but that’s just my own personal opinion, and I am completely guessing.

Hannah Corey: Great. All right. Thanks Kris. I know a lot of people are wondering that. I think that’s it for questions. Jonathan, would you like to end with anything else?

Jonathan Whang: No. I guess, thanks everyone for coming and…

Hannah Corey: Yes, thanks everyone for coming and we’ll send you the slides and the recording in the next 24 hours, and a big thank you to Kris and Jon for the wonderful presentation. Have a great afternoon, everyone.

Easily Create Maps in Drupal with Leaflet [May 1, 2014]

Click to see video transcript


Moderator: Webinar, Easily Create Maps in Drupal with Leaflet, with guest presenter Amber Matz who’s an educator at Drupalize.Me. Amber, thank you so much for taking time out of your day to present to us.

Amber Matz: Alright. Hi, everybody. Thank you for joining us at the webinar today. I’m Amber Matz. Up until recently, I was Amber Himes and you can find me on Twitter attwitter.com/amberhimes. I work for Lullabot and I’m a trainer for Drupalize.Me. In this webinar, I’ll be taking you through how to easily create maps in Drupal with Leaflet. For you Drupalize.Me subscribers out there, I have just released a video series on this very topic and the first three videos in the series are now available. If you’re not already a subscriber, you can find out more about the mapping with Leaflet series and becoming a subscriber to Drupalize.Me by visiting a special page for attendees of this webinar at lb.cm/acquia-leaflet, which is a shortened URL that will re-direct you to a page on the Drupalize.Me website.

Before I dive into Leaflet, let me give you a brief overview of how mapping solutions can be implemented in Drupal. There are two things that you need to implement a mapping solution in Drupal. The first is a location storage module. This is the module that is in charge of collecting, storing and at the very least, providing a basic display of that data. So what that means is that by choosing a location storage module, you are choosing on the backend a particular data table structure; on the administrative side, you are choosing a way or a set of ways to enter in location data; and you’re also choosing, if the module provides it, a field formatter. It’s really nice if a field formatter is included so that you can configure how that data is displayed, at least on a default basic level. The second thing that you need is the mapping module itself. This is the module that is responsible for configuring and displaying the actual map and a map being a set of layers that can be configured to convey geographic information about a location. That can be a very simple implementation to a very complex, interactive implementation. The modules differ in which set of base layers are made available, the user interface controls, the markers and most importantly, which API or web service they’re using to render the actual map. Depending on your choice of a mapping module, you may get locked in to a terms of service that doesn’t scale to the needs of your application or has implications for a site migration. So that’s why it’s important to really decide and make a good decision about which location storage module and which mapping library you’re going to use. So how do you know what to choose? Well, fortunately, there’s a documentation page on drupal.org that provides a comparison of mapping modules in Drupal and that page is drupal.org/node/170948. I’m going to go ahead and open that up.

If I scroll down to this table down here, just keep in mind that this page is marked as “Needs Updating” so take the information with a grain of salt. In the first two rows here, we’ve got the mapping module and then we have the supportive location storage module. Here’s Leaflet over here and as you can see, Leaflet requires Geofield as the location storage module. As you can also see, Geofield is a pretty popular choice for a location storage module. So, if you are just getting started with mapping in Drupal, Leaflet is a great place to start because you can use Geofield as your location storage module and it’s supported by open layers, IP Geolocation views and maps, and those to other modules will even support Leaflet maps. So, this is a great jumping off point if you’ve been reluctant to get into mapping or you’ve been intimidated by just the sheer volume of options and configuration that are provided in the other modules. Leaflet is a great place to start with the mapping module because it uses Geofield and you can always swap out this mapping module later. Alright.

So, Geofield. What is Geofield? Geofield is a location storage module. It provides a new field type that we can add to a content type called Geofield and it also provides widgets for entering many types of geospatial data. It also has some field formatters so it can provide a basic display of a variety of geographic formats.

Leaflet is a couple of different things. So when I say Leaflet, I’m meaning the lightweight mobile-friendly java script mapping library at leafletjs.com. It’s also a Drupal contrib module that provides immigration with the java script library as well as a field formatter and the developer API and even a sub-module that provides the views integration. That’s what I mean by Leaflet. So the first thing that we need to do to get a Leaflet module - or to get a Leaflet map on our Drupal site is to install Geofield module. So to install Geofield, we would do this in the normal way of installing a module. We would need to download Geofield and its dependencies which are GeoPHP and CTools from drupal.org. You will need to enable these three modules and I prefer using Drush to enable modules. It comes particularly handy because in the documentation for Geofield, it only lets GeoPHP as a dependency and if you use Drush, you’ll find that CTools is also a dependency. So it’s just a nice way to find those hidden dependencies that may not be documented. So to use Drush to enable Geofield, I would type “drush en geofield”. This would prompt me to download Geofield and its dependencies if it wasn’t already on my site and then it would enable them in turn. So a little tip, if you are not quite familiar with Drush, you can also download and enable these modules through FTP and using the administrative UI.

Alright, so I already have Geofield installed on my site and now I’m ready to add a Geofield. So, I’m going to hop over to my example site and I’ll navigate to structure, content type. I’m going to add a new contact type and I’ll just call it “Location Demo” and save. I’ll go into manage field now and now if you’ll notice in this field type column, if I drop down this list, before I enabled Geofield, I wouldn’t have had those options but now that I’ve enabled Geofield and its dependencies, I have a new field type called Geofield. So I’m going to select that and give my location field a name. I’ll just choose a widget here, there are four different choices and these widgets can change if there are other modules that can extend this. I’ll just latitude and longitude and save. Since I already have the demo, I’ll just add a new field type there. There we go.

Okay, so the first field setting is the storage backend and there’s only one choice, so you can see that this is scalable. If you want to add a different storage backend, you can. I’m just going to save this field setting. For this field, I could make it required, I could add some help tags which is always a good idea. You can also check this box to use the HTML5 Geolocation feature to set default values and that’s that saying where you’re browsing the internet and a website asks for your location, it’s asking permission, “Do you want to share a location with this website?”, that’s what that feature is all about. So, you can turn that on and you can nag your users for their location. So that’s what that option is about. You can also provide a default latitude and longitude. Number of values, kind of the usual field setting. So go ahead and save these settings keeping all the defaults and now we’re ready to add a new piece of content using our location demo content type. Go ahead and add content and I’m going to use my location demo content type. Let’s just use the Austin Convention Center which is the home of this year’s North American DrupalCon. As you can see, it just says I’ve updated my content type and added a Geofield content type and I’m using this widget, latitude and longitude. I now have the set of fields, actually, that is asking for the latitude and longitude. I don’t need to worry about the display of the latitude and longitude at this point. I just need to enter in the numbers here and the field formatter, which we’ll get to in a moment, will take care of how that data is actually displayed.

So I’m going to pop over to maps.google.com and I’ve searched for the Austin Convention Center. Even though it’s not giving me the latitude and longitude and those coordinates just yet, I’ve found that if I just click kind of near the marker, I’m still on the location but I’m not on the marker and Google will give me the latitude and longitude. So that’s a little trick I’ve learned. I’m going to copy this information. The first number is going to be the latitude and the second number is going to the longitude. I’ll copy the first number here, including all the decimal points and I’ll paste that into the latitude. Then I’ll go back and I’m going to copy the second number including the negative sign, all the decimal points and I’ll paste that into the longitude and I’ll save that. Now, what I get is the location and it’s formatted in this way: all caps, points with a parenthesis and even has the longitude first and the latitude.

How do I configure this information here, that’s in our manage display. So if I go back to structure, and content type and I manage to lift the display here of my field, I can see all of the different formats that I could display this data. So I’ve got a location point that I entered using a latitude and longitude widget but I can display it in any number of ways. I will try the latitude and longitude and then this little gear up here and I can further refine the settings of the latitude and longitude. If you don’t understand all of these terms, just use the defaults. These mapping solutions, they really scale - You can do a basic implementation to a really advanced one. So there’s lots of options and a lot of these, I’m not familiar with all of the technical geographic terms, but just by using the defaults, you can get pretty far and just get a map on your page.

The format, I’m going to change this to the degrees, minutes, seconds, just for fun. I’ll click update and then save. Now, if I go to my content page, using my location demo, that latitude and longitude that I entered is now displayed in degrees, minutes, and seconds. Geofield just out of the box will provide a way for you to enter in your geographic data and some options for displaying it. Now, how do we turn this into a map? Let’s go. We just added our new location so we’ll need to now install Leaflet.

The instructions for installing Leaflet, you can find on the project page for drupal.org, so I’m going to go there now. I’ll just use the documentation page. Just to give you an idea of how to navigate around the documentation for Leaflet, if you’d go to the project page for Leaflet on drupal.org/project/Leaflet, you can find some basic information about the module. You can also find the recommended releases. You’ll notice that they’ve started developing a version for Drupal 8. This is also a great choice if you’re looking to scale up to Drupal 8. Build it out in Drupal 7 and then play around with the Drupal 8 version. There’s just a really good possibility that you’ll be able to more easily migrate to Drupal 8 when you want to, when you’re ready to, and when Drupal 8 is ready.

On this Leaflet project page, what we find is that there’s a link to this documentation because this is pretty slim information, there’s not a lot here. There is the issue queue here but if I go over to this documentation page, this is going to provide the meat of the information about this module. So, it provides integration with Leaflet and it lists out the supported number of extension modules that will extend the capabilities of Leaflet, also, some information about the required and recommended modules. So we’re going to need Libraries and CTools and when we get to the Leaflet views sub-module which is included in the Leaflet project, we’ll also need entity. Geofield is the preferred module for storing geographic data like we’ve already mentioned and there’s also some great integration possible with Address Field and Geocoder which I go into in my video series. Also, there’s Views and Token Support. Just out of the box, this is what you need, these are some of the required and recommended modules.

The first thing that we’ll need if you’re familiar with Libraries at all, this is a way for you to integrate with a Java Script Library or other type of Library. We would need to download that from the Leaflet.js.com page. So you could click on the download navigation menu item and you’ll want to download the latest stable version which, right now, is Leaflet 0.7.2. You want to download that to your sites/all/libraries folder. I’ve already downloaded this to sites/all/libraries and when you download the zip file and expand it, you’ll want to rename the folder to just “Leaflet”. So it’ll have the version name and the numbers and everything. You want to rename that to Leaflet so that this Leaflet.js file, attached to it is sites/all/libraries/Leaflet. You’ll need these other files as well, but that’s kind of your gauge, like “Did I do this right? Leave it on the right place?” Well, it’s the path to Leaflet.js/sites/all/libraries/Leaflet. I’ve got that already installed.

The next thing that I need to do is I need to download and enable the Leaflet Drupal module and its dependencies. The Drupal module will integrate with - it’ll bring in the java script library, it also provides the field formatter and the API, et cetera, and the Leaflet view sub-module. So I’ve downloaded and enabled Leaflet on my Drupal site, I’ve installed the Leaflet.js to sites/all/libraries, and now I’m ready to make my first Leaflet map. What we’re going to do is, Leaflet module provides a field formatter so what that means is I can go into manage display’ on my content type and choose Leaflet from the formatting type on my content type. So I’m going to update the format to Leaflet and I’m going to choose a map. Let me go ahead and show you how that’s done. I’ll go ahead and go back to my site and I’ll navigate to structure, content type, and I’ll manage display for my location demo. Now, here’s my field that I’ve added using that Geofield type. Right now, the format is latitude and longitude. Since I’ve enabled Leaflet, now I can choose Leaflet as the format of my data. So even though I’ve entered in a latitude and longitude, I want to display it as Leaflet. You’ll notice that right here, it says, “Leaflet map:” and it’s blank. We need to click on this gear and we need to select a map. Out of the box, one map is provided, OpenStreetMap Mapnik, so I need to select that. This is the one thing you need to do when you first start. To select the map, there are a number of other options that you can configure, but right now, let’s just see how this looks just by selecting a map. I’ll click update and then save. I’m going to go back to my content that I created. Now, instead of that, degrees, minutes, seconds, latitude and longitude, it’s displaying a marker on a map. A map that functions using the control and you can see that down in the corner here, it tells me this is using Leaflet and it tells me which map I’m using which will come into play in a little bit when we install more maps.

I’m going to talk here. What if your Leaflet map didn’t display? This can happen and there’s a couple of tips that I want to give you for trouble shooting if your Leaflet map didn’t show up, if there is like a gray box, or something just didn’t happen correctly. There are a few things you could do; First, you can check the status report page to make sure Leaflet is installed correctly. How you do that is go to reports, and status report, and here is Leaflet right here. It says the version of Leaflet and that it’s installed correctly. If it was not installed correctly, this would be red. There would be a big red X icon right here and it would give you the error message. When I was first playing around with Leaflet, my map didn’t display properly and I had a big red X here. I looked in issue queue for my error message and there was an error message, it’s the same error message in the issue queue but it had been resolved. The patch had been provided and I was using the fixed version and so I couldn’t figure out what was going on. It ended up being that when I expanded my zip file, my leafletjs.zip that I downloaded from here, when I downloaded this and expanded it using Mavericks, using my Mac, it didn’t set the permissions correctly and my webserver couldn’t actually read these files. So I needed to change the permissions of that directory to 755 and then the webserver on my local machine was happy and it could actually read and execute the files on this file. So there, it can be a permissions problem, it can be a bug. So I would say check the permissions of your site as well as libraries, Leaflet folder, especially if you’re using your operating system’s UI to expand the files, and check the Leaflet issue queue if you’ve got an error that’s just persisting. You could always ask in there.

The other thing that I noticed is that if you’re not connected to the internet, like maybe you’re working on the plane or something - I don’t know, and the tiles aren’t displaying. If you inspect the element, the map tile, you’ll notice that the OpenStreetMap tiles are externally hosted so it’s calling an external site to actually display those images. They’re not locally hosted on your machine. I mean that would be massive to host all of those tiles with the whole entire world in various zoom levels on your site. That would be crazy and not something that I want to do on my laptop. So you’d need to make sure that you’re connected to the internet. So those are some troubleshooting tips if you’re Leaflet map didn’t display. Using the field formatter in manage display isn’t the only way to display a map. Also, that map is only going to display the one point of the location we entered for that particular node. So what if you want a map of multiple locations? Well, we can use views. So just like you used views to create a list of your content, you can use views to create maps using Leaflet. The first thing that we’ll need to do is enable the Leaflet views module and this is a sub-module that comes with the Leaflet project. You would just need to enable this sub-module, leaflet_views, or you can go into the module UI and enable it. You’ll need the views UI enabled as well. If you don’t have views already downloaded, you’ll need to do that and enable the views UI. You also need to download the dependencies if you haven’t already which are Views and Entity. Once you have all of that downloaded and enabled, we can create a new view. Let’s go ahead and do that. I’ll go over here to structure, views, and I’m going to add a new view. I’ll make this a map of all locations. I’m going to show content of type and I’m going to use actually my location content type that I’ve created previously because I’ve added some demo-content to it already. I’m going to use that, but you’ll want to use the content type that has your Geofield on it. I’m going to create a page of a map of all locations and kind of simplify the path here to just say “Map”. Here’s the key area, the display format. Instead of an unformatted list, I can choose Leaflet map because I have the Leaflet views module displayed. I’ll go ahead and create a menu link to make this a little easier to navigate to. I’ll add that to the main menu and I’ll just change this Link text to be “Map”. I need to continue and edit, we’re not quite done yet. So now we have an unsaved view, we’re given the Leaflet Map settings. Just so you know, the preview isn’t going to work for you. How do you know what to do next? Well, if I click on the Settings link next to Leaflet Map, this will give me a clue. It says, “Please add at least one geofield to the view.” So now I know what to do. I can go to Fields and if I open up my content type, I would like to keep my content type manage field tab open when I’m building a view so that I’d know for sure what fields I need to add. I need to add the field that is using the Geofield field type and that’s my field_location. I’ll go back here and now I can add my field and I’ll just do a search for a location. I want to use the one that’s in my node location content type and now I’ve got two here and I’ll apply all displays. All I need to do to this field is exclude it from the display. I don’t need to mess with anything else. I’m just going to check “Exclude From Display” and “Apply (all displays)”. Now, I have the location at field which is my Geofield added to my view. Now, when I click on Settings, I’ve got some options. Hurrah. So the data source is my Geofield and now I can choose for the little pop-up window that’s going to show up when I click on my marker, I can choose a title field. So I’ll go ahead and just use my node Title Field and for the description content, there are a few options. I can choose the title or the location, but a better option is to use this node entity, so the angle bracket node entity. Then you can choose a view mode so you can then use your teaser or if you’ve got another custom view mode that you want to use, that you’ve – this isn’t quite configured for this display, then you could use that. I’m going to use the teaser there. What this is going to do is it’s going to display the teaser in the description area of the pop up window and I’ll show you that in a moment. We’ve got the rest of our settings that we had on our field formatter when we managed the display of this field in the content type section so the same settings are applying here. I can choose my map. The nice thing about this one is that the map is already selected by default. Now I’ll click “Apply (all displays)”. Now, I’ve got my Leaflet map, I have no idea if it works yet. As soon as we’ve added it as a path, we’ve added a path to map. I’m going to save that and I’m going to go home, and I’ve got a nice menu item here. Now, I can see my map of all locations. So this is displaying the three nodes that I’ve created using that content type and I’ve got a map of multiple locations. So you can see that Leaflet out of the box with the Leaflet Views Module, you can display a map using one location, using the field formatter. If that’s all you need, then it’s super easy to do. You can see that it’s also really straightforward to create a map with views of multiple locations.

You could also add exposed filters to your views and add some different interactivity. So if you had taxonomy fields on your content type and you wanted to enable your users to filter by those, just use that knowledge that you have about views and what kind of functionality and UI that you want to provide to your users and think about what you want to provide for your map and you can add that to your view and have that interactivity. So it will filter the markers just like it would filter a list. So just think in terms of instead of like a list of teasers, you’re getting a group of map markers. It’s really cool to be able to create a map of multiple locations using views because many of us are really familiar with views, we’re comfortable with it, we know how to make lists of content, we know how to add relationships and exposed filters and that sort of thing. So, to be able to create a map using views, we’re familiar with that UI so it makes it a little more straightforward, especially if you actually are familiar with views.

So what other things can you do to your Leaflet Map? One of the things you can do, is you can replace that little blue marker with an image of your choice. If you browse around the internet, you’ll find there are quite a number of free libraries of marker images if you’re no good with drawing on the computer - and I’m no good at drawing on the computer. There are plenty of options out there for marker images. You’d just want to make sure it’s appropriately sized. Then we’ll update the point icon in the Leaflet Map settings. What I’ve decided to do is I want to change the map marker from the blue marker to the druplicon icon. So I’ve saved in my sites/default/files and I created a new folder called “map_icon” and I’ve save this little druplicon_marker.png. I downloaded that from Drupal.Org and you can see it’s just this tiny little druplicon marker here. What I need to do is go back to my site. First, I will change it on one of these nodes here that I’ve created, so I’ll use the field formatter. I’m going to go into structure, content types and I will view - I can’t remember which content I’ve created. [Laughter] I’ll just manage the display of this one, how about this? I need to go into Manage Display and for my Location Field, I need to click the gears here and now we can find the settings, so I’m going to expand the Point Icon. I’ve got a couple of different options here and I’m going to demonstrate the Icon File Option. So all I need to do is provide a URL to the path to my image. I’m going to go into Terminal here and I think it’s in this directory. I’m just going to copy. I’ve got it saved in sites/default/files/map_icons. I’m going to include this initial flash. I noticed that if I don’t do that, it doesn’t work so good. So I’m making an absolute path and I’m going to copy my file name because I keep misspelling druplicon and I don’t want to do that. So now I’ve got an initial flash and I’ve got the path to my PNG file that I’ve re-sized down from the druplicon logo that’s provided on Drupal.org. I’ve got it sized down and there are other options I can do, but I’m just going to keep the default and click “Update” and “Save”. I’m going to load up a location node and now instead of that blue marker, I’ve got the druplicon as my marker. Now, if I want to do this on my view, it’s basically the same process. I’m going to go ahead and copy that path and file name so I have it in my clipboard. I’m going to copy this, I’m going to go back home and click on the map. If I hover over my map here which is actually a view, I’ll get my gear. If I’m logged in, then I can edit my view from there. Under Format and Leaflet Map, I’m going to click “Setting” and then a very familiar looking settings, I’ll just expand the point icon and I’m going to make sure that Icon File is selected as my icon source. Then I’ll paste in that path into the icon URL which is the path to my marker image and I’ll Apply (all displays). Now, if I save this view, instead of the blue markers, I’ve got the druplicon as my marker. So that’s how you can add a custom marker and you can change the icon of your marker using Leaflet in a very basic way. There are other options there, but that’s the most straightforward and basic way to change that marker image.

Moderator: What else can you do? [Pause]

Amber Matz: You can add more maps. So there is a great module out there called Leaflet More Maps and that’s at drupal.org/project/leaflet_more_maps. It is the greatest module name ever because it does exactly what it says it does. It provides more maps for Leaflet and it provides over 20 different maps from a variety of providers. OpenStreetMap, Esri, even Google Maps are in here. So, Bing, MapBox, Stamen, MapQuest, and a bunch of different ones. So you can see the licensing terms which, this is the main reason for changing out the map. It’s if these terms of service and licensing don’t fit with what needs to happen on your website, then it good you have a choice here and you can find a map with a licensing term that works for your organization, it doesn’t conflict with what you need to do. I need to enable Leaflet More Maps. So I’ll type “drush en leaflet_more_maps” and now Leaflet More Maps is enabled on my site. So I’m going to go back to my structure here and my content type and I’m going to go back into the Manage Display and back into the gear settings to find my Leaflet settings. Now, when I drop down this Leaflet Map Setting, I get a list of a bunch of new maps. What you’ll notice is that you’ve got the name of the map and then right next to it, it shows the zoom setting. So these maps are a series of tiles that render at different zoom levels. Not all maps will provide all the zoom levels so like Esri Ocean, its zoom level is zero to ten. Most of them are going to be zero to eighteen but you can see that there are some slight differences so you want to just keep that in mind. So if I choose the Stamen Water Color Maps and click Update and save, and if I go to a location node, now, instead of the OpenStreetMap, I have this very interesting and lovely water color map displaying. You can see here’s the tile Copyright Information. Not only can you tell visually but you can tell in the Copyright Information and you can go to the terms of service there. So that’s how you would change on your field formatter and it’s the same process on your view. So we go into the view, we edit the setting, and now we can choose a map. So I could choose just like a Google Road Map and apply all the settings. Now, I’ve got a Google Map, a Google Road Map instead of my OpenStreetMap on my view. So you can have a different set of settings for your view and your nodes. So those are two sets of settings, if you change one, it’s not going to change the other. So if you’ve got both things going on, you need to change it in both places. Excuse me. That’s how you would add more maps.

Another thing that you can do and that I’ve kind of alluded to already is that you can change the zoom settings. Zoom settings are - alright, what happens here when you hit the plus and minus sign? You can set the initial zoom level. So maybe your website is targeting people who are not familiar with where Austin is so you want to give them a little bit more of a context. So maybe you want your initial zoom level to be something like this. “Yes, I recognize the United States. I can see that Austin is in the state of Texas, in the southeast area of Texas.” So maybe you want to set your zoom level to be a little more zoomed out to give people a little bit more context. If your audience was just a bunch of locals and people who are like in downtown Austin and they already know where they are at, maybe you want your initial zoom level to be really close and a detailed view where you can see, “Okay, it’s on this side of the river. It’s near the downtown area and it’s west of the 35 and so forth.” So you want to consider your audience and what you’re trying to communicate with your map when you set your zoom level. You also want to consider which map you’re using and what zoom levels are available on your map. So for example, if I go back to my view here and go into settings, I can see that the Google Map has all the zoom levels from 0 to 18, but if I chose something else like – I don’t know. How about this? No, I’ll just choose this MapBox Warden one. It has a zoom level to 18 so then I can go into my zoom level. You’ll want to adjust the zoom level to map what’s available for this map and you can use the map defined settings if you just don’t want to mess with the numbers of it and it’ll just use the default that is included with that map but if you want to customize it, the lower number means it’s far away and the higher the number, the more zoomed in it is. So if I wanted to do a real zoomed in map, I could choose like 12 as my initial zoom level for when that page first loads. Then I like to just set the map-defined settings here but you could constrain this if you wanted. Let’s just make it 16. So now, we’re within our zoom levels here. That’s the one thing you want to keep in mind so that you’re not shooting yourself in the foot there, make sure you’re within the parameters that are provided for your map. Then you need to Apply (all displays) and save your view. Now, we’ve got our initial zoom level and it only lets you zoom in and zoom out to the levels you defined in your setting. That’s how you can very simply change some settings and customize your map, just using the out of the box settings for Leaflet. The other thing that you can do is you can use tokens in your pop up text. So this is especially useful if you’re not using views.

Let’s go load up one of these nodes here that’s using our location content type. So right now, when I click on this marker, nothing happens, there are no pop-ups enabled like there was in Views. You could see that with Views, you could really control that a lot better but you can do some basic formatting here on that pop-up text and how you do that is you go to Structure, Content Types, back into Manage Display and I’m going to go back into my settings here and there are two things you need to do. First, you need to enable a Token Module so that you actually have some Tokens here, and the second thing you need to do is you need to enable the pop-up. So it wasn’t even enabled at first. You can enter in some static text or you can enter in a token. So I’ll go ahead and expand this node field set and I’m going to look for the title of my node. So here it there, I’m going to copy this token including the square bracket so the whole thing here. I can either copy and paste it or if my cursor is in this pop-up text, I can just click it and it will populate the pop-up text. So now I’ve got my token for my title of my piece of content in the pop-up text. I’ll click update and save. Now, if I go to one of these nodes and click on my marker, I’ve got a pop-up text that has the title of the node. You can see that this marker pointer is kind of off [Laughter] so the thing that you can do is you can adjust the XY location of that marker by going into your settings again and this point icon, you can say where the pop up anchor is so you could change, you could mess around with the XY location to try and get that pop-up anchor a little closer to the actual marker so it’s not covering it up. So that’s how you would do that. That’s where you would need to adjust this pop-up anchor point.

Alright, so that is my big “tada”. That is a basic overview of what you can do just out of the box of Leaflet to get a Leaflet Map on your Drupal Site. You can use Leaflet to display a map of one location using just the field formatter in the Manage Display setting or you can enable the Leaflet Views Module and create a map of many locations. If you want to find out more about what you can do with Leaflet and mapping on your Drupal Site, check out my video series available on Drupalize.Me and it’s an extended and a little bit more in-depth version of this presentation. The first three videos are now available. You can also go to lb.cn/aquia-leaflets. This is a special page just for attendees of this webinar. You can find the slides linked to some of the resources that I mentioned in this webinar and some other information that you may find useful and interesting. I think I will send it back to Hannah and see if there are any questions.

Moderator: Yes, great. We had a couple of questions come in. The first one is, “Is there a complete programming for integrating a picture album or a picture GPS information? Can you implement on top of Google Earth KMZ files?”

Amber Matz: Some of these questions, I’m not too sure about.

Moderator: Okay.

Amber Matz: Yes. The Google Earth, I’m not sure about that if that’s included in the Leaflet More Maps. Let me just top this down. The Google versions are the High Res road and terrain, the High Grid, the Road map, and the satellite. I’m just looking at this. It doesn’t look like Google Earth is selected. The question about the KMZ files, if I edit, if I look at the format here, it doesn’t – Look, I have seen support for it, and I just can’t remember off the top of my head what is supported with that. I have seen this around but I don’t know right now off the top of my head.

Moderator: No worries. We can all get questions answered after the fact and I can send you over the ones that weren’t answered. We can get somebody to answer them.

Amber Matz: Totally, yes.

Moderator: The next question is: Can you populate the map with dynamic icons? Could I have a classroom icon that could be programmatically placed on top of the map for the user?

Amber Matz: In terms of dynamic icons, there are a few different things that you can do. One of them is that if you’d go into the display settings here, if you look at the point icon, there’s also this icon source of field and you can actually set a class and you can have your markers be pure CSS and you can control the display of those markers using style sheets. The other module that I wanted to mention is the IP Geolocation Views and Maps and that module lets you, in the view UI, it lets you choose a differentiating marker so you if you have taxonomy field on your content type, you can say, “I want this turn to be a purple marker and this turn to be a yellow marker.” It provides some default markers but you can swap those markers out for whatever you want. So there are some UI options available, there are some CSS options available and I would recommend looking into the IP Geolocation Views and Maps just to poke around, just to have a UI to play around with, but Google is going to be your friend there as far as other dynamic options for markers.

Moderator: Awesome. The next question is, “Are the maps responsive?”

Amber Matz: The mapping interface is usable on a phone so you can tap on it and it will do things for you. Whether or not it’s responsive or not, you would need to implement that in your style sheet.

Moderator: Awesome, thank you. What about driving directions? Does the user get driving directions to a location through their typical method on a phone browser with a click through?

Amber Matz: The typical method is using the Google Maps API and that I did not look into with Leaflet. This is probably something that would require a little bit more advanced knowledge of Leaflet which – and I didn’t look into driving directions specifically. So there are several APIs that will let you use their data to do driving directions and I’m sure like Bing and Google are two of those. So yes. I’m not sure about that with Leaflet. I’ll look into that, though.

Moderator: Awesome. Are these maps local or stored on the web server?

Amber Matz: No, they are not. They’re all externally hosted and if you have a need to host these
yourself and for big mapping applications, there is that need sometimes. There are other services out there that provide hosting for map tiles like MapBox, I believe. The reason for that is that you’re talking about millions of images because it’s these tiled images that are there for each zoom level and sometimes there are 18 or 19 zoom levels. So, it’s really a big deal to host those images and not something you would want to take lightly or necessarily put on your local machine. I don’t even know if it would be feasible. So these Leaflet map tiles and the ones provided in Leaflet More Maps are all externally hosted.

Moderator: Alright, the next question is, “Do we pay anything for using the Leaflet API?”

Amber Matz: No, it’s all free. Also, you don’t have to do any kind of special sign up with the Google API to use the Google Map. So in other modules like Location Module, you have to enter in your Google API key, you don’t need to do that with Leaflet. If you want, you can use Leaflet and you could display Google Map and you don’t have to enter in your API key anymore.

Moderator: Awesome. The next question is, “Can you use multiple markers for different locations. For example, have one market for use in Alabama and another one for Texas?”

Amber Matz: I suppose you could. You would probably need to use a taxonomy for that or some other differentiator. Again, I would suggest looking into IP Geolocation or IP Geolocation Views and Maps to see. You could probably set the differentiator by your state. So let’s say you’ve got a field that is State and you could possibly set it up that way, you could set it up on individual nodes. It doesn’t really make sense to set a marker for each node. If you get any number of nodes, that would just be crazy to manage. Again, I would refer you to that IP Geolocation Views and Maps Module.

Moderator: Okay, the next question is, “How do you set up a field to show a ‘You Are Here Marker’?”

Amber Matz: You would need to enable the HTML5 Geolocation. So when we set up the initial fields here, if I manage my Geofield, I’m going to edit this. If I check this box, this is where I imagine this could take place. So the HTML5 Geolocation, it gives the browser access to your location, it’s the user-granted permission. That’s how you could say this is where you are, because you would set the default value to that location. I haven’t played around with this too much so this is my best guess, but that’s where you could get that information from the user.

Moderator: Alright, the next question is, “When several users are uploading nodes linked to maps, is it possible to show on a single map nation or state-wide range all user markers uploaded?”

Amber Matz: Yes, you would just need to use Views for that. Though I’m not sure about your specific implementation, but Views would be your friend on that.

Moderator: Okay, awesome. Can you tell how it’s possible, you can display a route on a map, walking, running, biking route? The route existing out of multiple Geolocation points?

Amber Matz: Again that’s something that’s something that’s something that’s been developed by some of these other APIs like Google Maps and my knowledge of mapping isn’t advanced enough to really be able to answer that question so I don’t know.

Moderator: Okay. Alright. The last question is, “How do you define the X and Y to get the right on place?”

Amber Matz: That’s a great question. What you need to do is open your file in Photoshop or some program that will show you where the X and Y point is of your cursor when you hover over the image. I open it in Photoshop and I open the info panel, and the navigator panel, and when I hover over the graphic, it shows me the X and Y coordinates. So then you could say, “Okay, the X coordinate is 14 and the Y coordinate is 17,” and then that’s what I would enter into my X and Y version. That kind of gives you a jumping off point, otherwise, you’re just guessing. So that would be my suggestion for that.

Moderator: Great. We had one last question just trickle in. Why would you choose Leaflet over Google Maps integration or the GMap Module?

Amber Matz: The GMap, let’s go back to this comparison chart here. The reason why I would choose GMap and the Location Module is if I had a Drupal 6 site that was using GMap and Location and I wanted to migrate to Drupal 7. It’s going to be hard enough to write that migration of all those location tables and I want to retain some sanity and feasibility and not blow my budget, so I’m going to just stick with GMap and Location. However, that’s almost entirely true because you could use IP Geolocation Views and Maps because it does support location at the storage module. Now, using Leaflet in Geofield, with Leaflet, you can display a Google Map using Leaflet. It’s a lighter weight module, the file is going to be smaller, it’s going to load quicker, it’s using Geofield at the location storage module which is very well-supported with these other modules and so it gives you upgrade path. It doesn’t lock you in like G Map and Location would lock you in. Even though you’re not completely locked in because of this module but that would be my reason why. I think each case is going to be different, right? I like the flexibility and the support that Geofield has and even though you’re using – in this demonstration, I used the Leaflet Module. You can display Leaflet, you can use the Leaflet Java Script library and some of these other modules like Open Layers or IP Geolocation Views and Maps. So you can use the Leaflet Java Script Library and these other modules. You can use Geofield in these other modules. If you’re just getting started with mapping, I’d recommend trying out Leaflet in Geofield because it’s a really easy ramp to get into mapping with Drupal.

Moderator: Alright, thank you so much Amber for answering all those questions. We’re running
out of time so I can send over questions that weren’t answered to Amber and we
can try to get some of them answered for you. Again, the slides and recording will
be posted to our website in the next 24 hours and we’ll also e-mail you out a copy.
Amber, would you like to end with anything else?

Amber Matz: No. Thank you all very much and I hope you enjoyed the presentation.

Moderator: Yes, thank you. Have a great afternoon, everyone.

- End of Recording -

How to Grow Your Global Community with Social Translations Powered by Drupal Commons, Lingotek, and Propeople [May 1, 2014]

Training: Best Practices for Drupal Security [April 30, 2014]

Click to see video transcript


Moderator: Today’s webinar: the Training Session on Best Practices for Drupal Security. I have my colleague, Ben Jeavons, on the line who is a Senior Software Engineer here at Acquia, Cash Williams who’s a Technical Consultant, and David Stoline who’s also a Technical Consultant. Thanks so much for taking time out of your day today to present to us.

Ben Jeavons: Thanks everybody for joining us today. Today we want to talk about Drupal Security. There are three sort of main categories that we’re going to be covering. Obviously Drupal and security are very large topics and we can only get into so much today. So we’re going to outline some of the vulnerabilities and risks that are popular and common on Drupal sites. As well as delving into understanding user input and how most attacks get started. Specifically we’ll talk about permissions and roles of Drupal sites and how you can evaluate the trust model of your Drupal site. We’ll also go into further tips and best practices regarding security by talking about backups, logs and strategies for managing quick deployments and staying up-to-date with your Drupal site.

What we hope to be some of the main goals that you get out of the training today are these three ideas. We’re going to talk a lot about user input and trust and the idea of that being the main risk on the web and the source for a lot of the vulnerabilities that occur. We’ll also talk about just this idea of staying up-to-date, how important that is for Drupal and for the rest of the software you’re running on your site. As part of all of these is this idea of defense in depth. In a sense building a castle-like structure where different strategies maintain security from first build of the site through ongoing maintenance.

Security is obviously very important and in lots of cases, it’s becoming even more so. So in the last year a data breach investigation study talked about how the importance of these cyber-attacks are very important for small businesses. So in this case 71% of the data breaches, as found in this study, occurred for businesses with less than 100 employees. This is something that not only affects small businesses but obviously large organizations and businesses. So a recent data breach at Target affected roughly 40 million debit and credit users that have purchased from Target. So this affects not only the small organizations but large organizations as well. As well as even affecting at a small level the software that they’re specifically running. The Heartbleed incident from last month was a huge vulnerability that affected roughly 66% of the internet due to a vulnerability that infested in the OpenSSL library used on a large amount of sites. So while it can affect individual businesses in the way that they’re affecting – they are going about their business goals, it also affects larger, very specific things and the applications being used on the internet. So the Heartbleed incident for instance might have allowed somebody to attack the actual encryption used when you communicate, for instance, with your bank or with your Drupal e-commerce site and the like.

As I said, we can only get into so much on this topic today. The good news is that DrupalCon Austin, we’re offering a full day, hands-on training as part of the DrupalCon Austin schedule of events. So on Monday, June 2nd we’ll do a full deep dive into the different vulnerabilities that we’ll just sort of talk about today. Vulnerabilities like cross-site scripting, SQL injection and access bypass. If you register before May 2nd this week, you can take $75.00 off the cost of the training. The profits on the training are split with the Drupal Association. So along with educating your site developers and builders and themers, you’re also helping to support the Drupal Association. You can find more about this training on the DrupalCon Austin site.

Let’s get started talking about some of the vulnerabilities and risks that exist on Drupal and in the web in general. So some of the data that we’re going to be showing has been compiled as part of a report on the state of Drupal Security. So what this report did was analyze the security advisories that are published by the Drupal Security Team. These security advisories highlight a bunch of the vulnerabilities that have been found in Drupal Core and stable contributed modules and themes on Drupal.org. So what this chart is showing right here is popularity of vulnerabilities. I won’t explain each individual vulnerability in detail but you can see that this classification of vulnerability, XSS or cross-site scripting, is one of the most popular vulnerabilities found in Drupal code. That is code that’s been published to Drupal.org. This gives us a sense that cross-site scripting as well as access bypass, cross-site request forgery, that’s the CSRF, are very popular vulnerabilities that exist in Drupal code. When we further differentiate these vulnerabilities by Drupal Core and contributed projects, those contributed projects such as modules and themes, we can see that again cross-site scripting is very popular but is more popular in contributed projects than in Drupal Core. Drupal Core just being the main download of the actual Drupal Project has had a lot of eyes that have reviewed that code. So it’s something that vulnerabilities have been discovered before this code has been published and that doesn’t require as much security fixes. Contributed modules though, there’s a wide variety of them. There’s tens of thousands of contributed modules and themes available on Drupal.org. Of those stable releases such as those not being developed or into beta release, there have been a lot of vulnerabilities found. That’s just a matter of having less eyes on that code. As we know from the Heartbleed incident, even heavily used code can still have vulnerabilities but it’s a fact of the matter that having eyes on the code does result in more secure, better written code. We see this when we look at Drupal sites, actual Drupal installations that have been built by customers and are in use on the web. When reviewed by any sort of security auditor, so for instance WhiteHat Security team did a review. Acquia provides a service for reviewing Drupal sites. We find that most vulnerabilities are just in either the custom code that the site is running whether those are the modules or themes or actually in the configuration or practices in running that Drupal site. Oftentimes sometimes sites are also running out-of-date code. So those vulnerabilities that we saw just a moment ago, things like cross-site scripting and access bypass, those do exist. They exist most often, though, in custom code or as a result of insecure configuration.

So we’ll talk about some of the ways that you can configure securely and processes for maintaining up-to-date code and being sure that you’re not running a vulnerable or insecure modules and sites. I should note that, outside of Drupal, cross-site scripting is a very common vulnerability as well. So it’s not just within Drupal. It’s in a larger web state that cross-site scripting is such an issue. This stat from WhiteHat Security is from their website security statistics report, found that 66% likeliness that a website is vulnerable to cross-site scripting.

Let’s talk a little bit about what is at the heart of cross-site scripting and a lot of these other vulnerabilities. It’s all about the way that user input is used. So we’re going to say that user input is the root of all evil in the sense that a malicious user can manipulate the way that they provide data into a system to carry out some sort of attack whether that’s a cross-site scripting or other form of attack. So when thinking about user input, what does that mean in regards with Drupal? Lots of times that’s any place where a user can submit information. So for instance what pages have forms on your Drupal site? Whether these are places where a user can submit a piece of content like a blog post or maybe they can add a comment to existing pieces. Or maybe also they can submit some sort of web form entering in feedback or perhaps entering data as part of a shopping cart, e-commerce experience. These are all standard examples of user inputs on any site as well as nodes and comments particular to Drupal. There are lots of other properties the way that a user interacts with a website that allows them to submit information, that could be a part of the HTTP request such as a depth request of the parameters in the URL that they’re requesting or actually parts of the HTTP header information that’s being sent along as part of the request. Those are all used by the system to do certain things. If a malicious user passes along dangerous data, they might actually change something about the system and carry out some form of an attack.

So in a sense, this picture demonstrates what is happening clockwise when a user is interacting with a Drupal site. This is a standard Drupal installation site. We’ve got a user on the left using a browser, submitting information into Drupal at point one. Perhaps they’re adding a comment on a blog post or adding something to a shopping cart. That information is used by Drupal, stored in a database at point two. Then perhaps that user is wanting to see their comment posted or see that item in their shopping cart. So when Drupal renders that page back to them, it pulls out data out of the database in point three and renders that back at point four to the user so that it’s viewable in their web browser. So when we talk about user input we are referring to that point where a data is coming in at point one. Then different parts of the system need to make sure that it’s not being manipulated or insecurely used such as to open up a type of attack. To get into more detail on that, I’m going to pass it off to David to talk about the ideas of trust.

David Stoline: Thanks Ben. So who can you really trust? When I audit websites I see a lot of situations where maybe it’s just a simple intranet or maybe it’s an internal website where trust has been given kind of overtly to just anyone. Trust is really the, I guess, essence of web security and defense in depth. Trusting user input, it’s definitely not a good idea. So we get to – just make sure that when you’re making your Drupal site, you do audits of your roles and permissions so this makes sure that your users aren’t able to go out and do dangerous and malicious or potentially malicious things. Keeping your modules installed at a minimum. Modules definitely increase the surface area of your site leading to a potential - things can get missed, new permissions get added. Just even enforcing strong passwords everyone may have their quick ABC123 password but making sure that user doesn’t have access to very important things or even that user might be an admin. It’s just ensuring that these things are safe and secure. So this really brings up the principle of least privilege. Giving users the ability and access to do exactly what they’re required to do. So on some sites, that just might mean logging in to your e-commerce site, adding something to your cart and purchasing, on other sites that might mean no access for an authenticated user. On some other sites it might mean your administrators have access to do everything but in a very specific and controlled way that you’re able to basically audit and keep an eye on so that they’re – you can ensure that they’re only allowed to do what you actually want them to do.

Here are a couple of examples of kind of the core, very important and kind of risky permissions to give to your general users. So this is obviously administering permissions, administering users, administering filters. So filters are how Drupal will output text in a sanitized manner to the web. So those are definitely a place to watch out for. There’s also the content type permissions and site configuration but there’s also several contributed modules that just about every Drupal site has installed. So that’s Views, that’s CTools, and inside of those there are some rather important permissions to kind of keep yourself informed of and be aware of and kind of monitor those things on an ongoing basis. The kind of final tenant of trust is ensuring people have strong passwords. It says administrators here but I really think it’s people in general. Administrators obviously have more access to do anything to the website but more often when attacks do happen, they happen because a malicious user is finding one vulnerability and then using several other vulnerabilities to either do something or do something more malicious by getting further access to the websites through bad passwords or what have you. You can look to breaches on say, Adobe or Sony or even on Drupal.org to kind of exacerbate that issue.

So let’s talk about best practices and what we can do. Kind of the most important thing you can do is just stay informed. Drupal.org has pretty advanced policies for dealing with security releases. Generally that’s every Wednesday. Actually Ben, Cash, and I are all on the security team so we are kept abreast and involved in these issues and work to get the schedules out or the releases out. Your install of Drupal has a built-in check for updates. So if your site is regularly checking for updates and configured properly to check for updates, you’ll see that your modules are out-of-date or there has been a security release. It should stay on top of those and make that a regular part of your release cycle. There are two Twitter accounts. So you can follow @drupalcore and @drupalsecurity to follow release announcements. There’s also a mailing list that you can subscribe to that will send out the same security advisories that you’ll see on @drupalsecurity. When these releases do come out, it’s really important that they be applied to your site and tested in a manner that fits with your organization’s workflow.

So the update process, what does that look like? At Acquia we provide three tiers of protection basically for testing changes to your site. So when an update comes out, you don’t have to just go and directly apply it to your production site and kind of hope that it doesn’t break everything or I’m sure that your change control process people are not going to look forward to having some downtime on your site. So we suggest definitely running updates in Dev or Stage and then vetting them and then applying them to your Production Tier. Drupal makes this really easy to do through Drush. If you’re not familiar with Drush, please Google it. It’ll save you a ton of time. So once you’ve committed your changes with version control system and hopefully you are using version control system, you are able to run updates then you can do your vetting and testing and really quickly and easily deploy it with your version control system and with that I’m going to hand it over to Cash.

Cash Williams: Awesome, thanks guys. So we’re going to shift gears ever so slightly here and kind of talk about maybe not as Drupal specific but just best practices in general. This is probably I assume where a lot of people’s eyes would be rolling, right. We all know we need to make backups. However, backups is just the first step. David and I are both security consultants and we work with customers quite a bit. So a lot of what I’m going to talk about is driven from actually seeing customers run into these problems firsthand. So I think this is a quote and if it is, I don’t know where it came from but I use it often. Not just with respect to backups but with anything really but if it isn’t tested then it doesn’t work. So it’s one thing to say, “Yes, we make backups. We have daily backups.” It’s another thing to say, “We actually know how those backups work. We know that they do work and the process of restoring a backup is easy.” So if we go back to say the Target incident, a data breach isn’t necessarily the type of attack that we’re talking about here. This is more if someone deletes your database through a SQL injection or defaces your website, how quickly can you get that problem corrected? So backups can kind of be our “Get out of jail free” card in this case, right? In order to use this as our “Get out of jail free” card we have to ensure that the process end to end is both tested and documented.

So a question that I’d like to ask clients is, how complicated is the process of restoring a database? It’s a multi-step process that has a lot of moving parts and a real world of it happens where, let’s say that your website is defaced and you’re under pressure or multiple people are moving quickly to try and get the website back up. It’s easy to make mistakes, right? So if possible, it’s best to automate as many things as you can. If running your restore is a simple click of a button versus some 10-step process, it’s going to be much more successful. The next question is: is everything documented? If Bob is you DBA and he knows how to do a restore right off the top of his head, what happens when he goes on vacation? You have to make sure that anyone that may be filling in for a position can easily step in, find the documentation as needed, performs a backup and know which backup to restore and how to do the process. Another thing that I run into a lot of times is there can be some technical barriers to performing this. So if someone knows how to perform the process but doesn’t actually have the account or the credentials to do so or can’t find the log in, can’t get access to the backups if they could, all these things have to be fully documented and have a plan in place to be able to perform this. Then just going back to the testing nature of it, this should really be tested regularly. I think it came out a couple of years ago, Netflix shared with us that they have a process running in their data centers called, I believe Chaos Monkey. What Chaos Monkey does is runs around on their data centers and breaks things on purpose, right? So if anybody is developing any piece of a system, they know that Chaos Monkey could break it at any point. This kind of holds developers and system administrators accountable to know that all their systems have to be tested.

So another common way to refer to this is a fire drill. So it’s important to run a fire drill every now and then and actually test to restore. See what it looks like. Then to the next point is how long can this take and the only way to know is by testing it. If your site is defaced and a manager walks in and says, “How long is it going to take to get this back up?” It’d be great to have a very specific answer and say, “In 15 minutes, the site will be restored and we’ll be back where we were yesterday morning. The other piece of this is logs. Again, going back to kind of what I’ve seen firsthand, a lot of sites actually don’t have logging enabled because at one point someone declared that it may be a performance impact if the site’s logging too many things. So maybe they unchecked the database log that comes in Drupal but forgot to enable the system log that comes with Drupal or they just turned them off completely because production ran faster without them. So without logs you can actually get access and see what your system was doing at any given time. The other issue is a lot of times a site will have a lot of warnings. If this is because it’s either developed poorly or misconfigured to be a little too verbose in the logs. There’s actually so much noise in the logs that it’s not very useful. If something does happen or even if you’re just trying to debug something and the process looks like – well let me go manually find the logs from two days ago and download an 80 Megabyte zip file and then I’ll need to map out all of these warnings so that I can even see what I’m looking at. Now I can try to find the timestamps for – this is already just way too busy and it’s not very effective. So it’s important to fix all of the errors and warnings and make sure that your logs contain what you need to know and only what you need to know. A good way to do this too is aggregating used systems. If you have multiple web servers, it doesn’t make sense for each of them to have their own log. They should be aggregated across all the web servers so that you can really see what an attack looks like from a whole against your site not just specific servers.

So hopefully this kind of rings a bell in some people’s mind especially in America. I don’t know what our demographic of the audience looks like but there’s a public service announcement that used to go out at 10:00 PM and it said, “It’s 10:00 PM, do you know where your children are?” I found it kind of laughable that we think we need a TV or public service announcement to remind us to look for our children but I have to figure that they did it for a reason. So in this case, “It’s 10:00 PM, do you know where your data is” or are for the mean there? The reason I ask is sensitive data can be littered across your system both in the code and in the database. So it’s important to track and know where all of it lives. So again, back to questions I like to ask clients is: do you have a list? Do you know where all of your data is? You should ensure that it’s not in the repo, right because a lot of people say, “Okay. Well our repo is hosted on GitHub. It’s a private repo. It’s protected. We feel like it’s safe to store sensitive data there.” Examples of this could be AP ITs, system settings, usernames, and passwords. So the problem here is if a year from now, you bring on and hire a consultant such as myself to come and audit your site and you just hand over repo access. So there could be the chance that your repo has hard coded AP ITs. It could also be the chance that you realize this and sort of remove them but are they still in the history? If I did a checkout and backed up to three years ago would I find valid sensitive data that’s still in there? I’ve heard of a couple of used cases where this happened where, I think it was something like a test needed to log in as user number one or the administrative user. The username and password was hard coded into the test and it was available in the repo. The other side of this is what’s not in the repo will be put in the database. It’s very important that all non-production systems be sanitized. Typically non-productions like Dev and Stage are held to a much less security standard because they’re not production, right? As well as - well you know, something a lot of people think about is developers’ laptops. The typical onsite, onboarding process for a consultant is you get access to the repo, you download that and then you get a copy of the databases and you can spin the site up locally. More than once I’ve looked through my local database and realized that I had some very sensitive client data that A, I don’t want to have and B, the client probably doesn’t want me to have. So there are things to think about is if I chose to be malicious and leak this data or if I didn’t do a proper job of securing my own personal laptop or let’s say that it got stolen at the airport, what does that mean to the client as far as where their sensitive data goes. So another thing I like to say is what if I leaked your production database today? How big of a deal would that be? One of the ways to protect against this is encryption. So if anything is in production that you don’t want to be known public, you should encrypt it. Drupal offers a couple of different contrib modules to encrypt data fields, user input and these kinds of things. So when we look at this as a whole this means that we could encrypt the data but the AP IT should not be in the repo, nor should it be on the database. So you have to think of these things as multiple levels and this comes back to the defense in depth that we’ve kind of touched on earlier but it’s just the whole picture of where all your data is and where it lives.

So thereabout wraps it up for this just to kind of recover the principles that we’re kind of touching on today. Don’t trust user input and think of user input can be anything coming from the user not just a simple field or form they can fill in. How to stay up-to-date? It’s important to stay up-to-date. The different ways that Drupal offers, users to know what’s going on. What the contrib and course space as well as defense in depth and best practices to keep up with those. So here’s just a few links and resources, if you want to look into and do more research on them. Ben mentioned the Drupal Security Report and that’s at drupalsecurityreport.com. Drupal.org has quite a few resources available and here’s just a few: drupal.org/developing/best-practices specifically calls out best practices when you’re creating custom code, drupal.org/security/secure-configuration calls out best practices when you’re configuring and site-building your site and again, drupal.org/writing-secure-code is another reference for how to write secure code when you’re creating modules.

Just to kind of set a reminder, the three of us will be providing hands-on training at DrupalCon in I think about a month, June 2nd. If you register by May 2nd which is, I believe this Friday, I don’t know my dates very well. You can save $75.00. Great, thanks. Our contact information is up here and I think I’ll hand it back to Hanna. So we can open up for some questions.

Ben Jeavons: Thanks, Cash. While we get ready to take questions, I just want to demo really quick a module that helps do some automated configuration analysis. So it gets a little bit further than what we talked about today and it’s recommended as a part of your process for securing your site. So the security review module is a module that’s available on Drupal.org that provides automated configuration analysis at several of the things on your Drupal site. So here we’re looking at the page showing the results and it’s a quick process to run the checklist. The checklist checks a number of different things in Drupal Core and some of the popular contributed modules. So for instance, one of the things we talked about was user input. The security review module will look and see if there are dangerous tags in any of the submitted content of your Drupal site. So for instance, here I have an article that contains JavaScript that security review module is flagging as potentially malicious. This is a local development Drupal of mine for testing. So in this case, I explicitly put in this JavaScript. We can also see some of the other checks that this module provides. For instance, when we talked about admin permissions the security review module also checks whether any of those administrative or secure permissions have been granted to untrusted users. You can configure on your site what type of user is trusted or not whether that’s anonymous users or if visitors can sign up for accounts in your site. So for instance on my local development site here, I have given the anonymous user the permission to access development information which is a permission via a contributed module but is not recommended for untrusted user use. This module is available on drupal.org/projects/security_review.

Moderator: Awesome. I know you had some questions come in. So we can start taking those now. If you have any additional questions, please ask them in the Q&A section. [Pause] The first question is when these updates come out, I never know what to test to check for things that might have been broken by an update. Can these sort of suggestions be added to bug reports?

Ben Jeavons: Thanks for that question. So when security updates are put out for Drupal Core or contributed modules, yes they often point out to specific vulnerabilities but it’s not clear exactly where those vulnerabilities happen and what effects that those vulnerabilities might have on your site. So could that information be added to the bug report is the question. That information can be added to some extent but it often really depends on how your website is built to decide like in which cases that vulnerability might apply or that vulnerability might be exploitable. So for something like Drupal Core oftentimes that functionality that might have a security issue is pretty common place. So that might be, for instance file uploads there that previously were not there in a Drupal Security Core release. There is an issue where file uploads could be exploited depending on certain I think Apache versions. So if you didn’t have file uploads, you’re probably not vulnerable to that attack. In cases of the security advisories for contributed modules, it gets a lot more difficult to recommend very specific ways or very specific things that you need to do to check. So my recommendation, at least to start for now, is to think about what are the main goals of your site. What are the business goals of your site and to document those goals and specifically how those goals are accomplishable on your Drupal site? So for instance if you have an e-commerce site, obviously you would like to make sales possible. You would like to allow user to purchase products and complete a successful transaction. So you might document that process and then when a security update for Drupal Commerce or for Drupal Core or other modules involved in that process come out, you can just step through that process, your goal and make sure that it’s still achievable. Furthermore, you can then adapt that into an actual automated test through things like Selenium or other forms of automated behavioral testing and then as for just the general idea of can it be added to bug report? It can, yes but that would be a process that I’d recommend going through the Drupal.org web masters process for getting that potentially added to security report. Thank you.

Moderator: Awesome. The next question is, what is Acquia’s recommendation for PHP version for Drupal 7? Drupal.org currently recommends PHP 5.3. However, it’s reaching the end of life and security fixes will end in July 2014.

Ben Jeavons: Sure. Thank you for that question. So I think as offering this forward, there’ll be some continued support for the current supported versions of Drupal so for instance PHP 5.2. So our recommendation going forward is to stay with the supported versions of PHP, so for instance 5.3, 5.4 and beyond.

Moderator: Awesome, alright. The next question is, are there any recommended automated tools to parse accounts newly created also that can parse from non-strong?

David Stoline: Yes, there are a couple of great modules for doing exactly that kind of thing. So on automated tools to parse new accounts. So my first thought there is the Mollom module. What that does is it’ll check the text that a user enters for kind of known spam vectors and can either deny that account being created or put it into a moderation queue. On the parsing for non-strong passwords, there are several modules actually and we recommend the Password Policy module which allows an administrator to basically configure length requirements and special character requirements and even history requirements around what passwords get configured by the users. So you can’t just go in and put like asdf or password or qwerty or kind of any of those low value, weak passwords.

Moderator: Awesome. The next question is, can passwords be moved to a separate database from the main Drupal database?

Cash Williams: I don’t know if Ben or David know of a way to do it specifically for Drupal but Drupal accounts can definitely be created and stored in other places. A lot of Enterprise clients have LDAP servers or active directory servers that are set up and so the passwords are stored there. More social media facing sites actually use external authentication either through Janrain or directly through things like Facebook Connect or Google Authenticator. So in these cases the passwords aren’t even ever in Drupal.

Moderator: Great.

Ben Jeavons: I would follow that up just by asking if under what conditions would you want to move the passwords out of Drupal because instead of separating that, you could just further increase the security of the encryption of those passwords. That’s part of this idea of defense in depth. So with Drupal 7 passwords are repeatedly hashed and stored much more secure than in Drupal 6. Going forward you can actually change the encryption mechanism and also some of the other details around the way the passwords are still unencrypted which certainly allows for that risk if something like a database was extracted from your Drupal site.

Moderator: Great. The next question is, are you aware of a module to provide Drupal’s install with two factor authentication?

Cash Williams: Ben, do you want to take that one?

Ben Jeavons: Sure, thanks Cash. So very recently I did work on a new two factor authentication module which aims to support a variety of different two factor authentication mechanisms. So for a while there have been some Drupal modules that provide very specific two factor authentication support, such as support with Google Authenticator which is a two factor authentication service very similar to Duo. So those all exist currently as individual features. Now there is a TFA module which works to fully support Drupal authentication and is well tested and will support individual plug-ins for those variety of services such as SMS delivery for instance or a TOTP type code like Google Authenticator and that’s on drupal.org/project/TFA. Thank you.

Moderator: Awesome. The next question is, do you have any examples of contributed modules that facilitate encryption?

David Stoline: There are two primary sort of leading modules. The AES modules, it’s specifically allows for using AES encryption. As well as the Encrypt module which is more of a plug-in style and allows for a couple of different options. I publicly put the link there. It’s kind of obscure but it’s on drupal.org. There is a comparison of the two modules. I can post it in the primary chat as well.

Moderator: Awesome. The next question is, is it secure to use Pressflow instead of Drupal Core?

David Stoline: So for those of you who don’t know what Pressflow is, Pressflow is a Drupal 6 – I think it’s a spoon not a fork. So it’s a very focused distribution of Drupal that is really around performance and scalability for Drupal 6. So on the security of Drupal Pressflow, really it is secure. It doesn’t have a formal process that drupal.org has around security releases. So there is a little lag time between when a Drupal 6 security release happens and when Pressflow will pick it up I’ve noticed in my experience. So that is maybe a thing to be careful with is just when a core release comes out maybe attempt to patch core yourself. So patching your Pressflow installation yourself or even providing a patch that the community can use and vet on the Pressflow’s GitHub page would definitely be helpful.

Moderator: Great. The last question is any significant improvements to the security environment in Drupal 8?

Ben Jeavons: Yes, great question. So some of the improvements that I can think of off the top of my head, one of the biggest ones is the PHP Input Format module. That’s been removed. So in Drupal 6, actually prior to Drupal 8, all versions of Drupal shipped with a module that actually allowed the execution only under certain configuration of PHP code through the Drupal user interface which certainly is a security risk. The reason that they did existing prior versions of Drupal was just that there were cases where in the development stages that that was beneficial at times but that’s now been removed from Drupal Core. That’s a great one and a secondary one, a security improvement in Drupal 8 is there is now cross-site request forgery token support actually built-in to the Drupal menu system. So while we didn’t dive in to the vulnerability of cross-site request forgery, one of the ways to secure against it is the use of tokens. In prior versions of Drupal that happened to be an issue in some cases. So now Drupal 8 has better built-in support for that specific case, for cross-site request forgeries. David, Cash I’m not sure if you have other recommendations that you’ve seen in Drupal 8?

Cash Williams: The only other ones – a large one I would say is switching from PHP template being the engine that renders our themes to the twig engine. It’s much more locked down, if you will and reduces specifically cross-sites – CSS, what does that stand for, or XSS – cross-site scripting but also I’m sure reduces the cross-site request forgeries as well. I’m not super familiar with Twig. I haven’t gotten too deep into it but I know it’s much less likely for a themer to accidentally open a vulnerability than as easy it is to do in PHP template as it is today.

Moderator: Alright. A couple of other questions trickled in, what backup systems are out there for easy recovery especially if the database is MySQL?

David Stoline: So I can take that one. There’s actually a lot and I’ve used at least several of the toolsets that are out there. One that’s really simple that I really like is just to kind of doing it by yourself. So MySQL has a great MySQL dump command and it’s pretty trivial to set up like a daily cron job or an hourly cron job to just dump the database to some location on the file system or dump it to like an S3 bucket or something like that. There’s also kind of a script on top of that whole process called – I think it’s AutoMySQLBackup which I’ve used to great success in the past too. It’s largely the same; it’s cron based. It’s basically dumping MySQL dumps to some place. So it’s great but there’s a ton of products in this like MySQLBackup space. So it’s really just kind of a discovery process in what your organization is willing to do or willing to invest.

Cash Williams: I think it’d be great to mention as well. Acquia’s hosting comes with tools dedicated specifically to this process. So you get environments for Dev, Stage and Prod out of the box and all three have dedicated backups. A matter of creating a new backup is just a click of a button as well as restoring a previous backup is just a click of a button.

Moderator: Alright. I think that’s it for question. I want to say a big thank you to Ben, Cash, and David for the wonderful presentation. Maybe you want to end with anything else?

David Stoline: I’ll just say don’t forget if you’re coming to Austin to sign up for our training. It’s a whole day of the three of us in a room together talking about Drupal Security. So if you are able to register this week you’ll save $75.00 on the cost of the training. So hopefully we’ll see you guys in Austin.

Moderator: Awesome. Thanks everyone for attending. We’ll send out slides and recording within the next 24 hours. Have a great afternoon.

Advance Healthcare IT with Cost Effective Technology Solutions [April 29, 2014]

Kill the Shop Button: How to Inspire Customers with Content & Commerce Experiences [April 24, 2014]

Click to see video transcript


Sasha: During today’s webinar we’ll talk about “How to inspire customers with integrated content and commerce experiences.” I’m joined here in the Burlington office by Acquia’s Senior Director of E-Commerce, Kelly O’Neill, as well Senior Vice President of Commerce Ray Grady. Also joining us from the other side of the Atlantic in the UK are i-KOS’ Managing Director, Myles Davidson, and his colleague and Technical Director of i-KOS, Richard Jones.

Ray Grady: Welcome everyone to the webinar. As Sasha alluded to, we’re going to talk today around trends that we’re seeing in commerce. Specifically, how brands today about B2C and B2B are needing to engage with their consumers and customers in different ways. So what we’ll do, we’ll kick it off with a quick introduction of Acquia and what it is that we do and our value proposition in the space. I’ll then spend some time sharing with you our experiences and what we’re seeing in the digital marketing e-commerce industry, and some trends that we’re seeing both B2B and B2C. Then, I’ll hand it over to Myles. Myles will kind of step you through an interesting customer that he has worked with in the UK that’s doing innovative things digitally and how digital is allowing them to not only engage with their consumers in a unique way, but also get to market differently with new products. Then hopefully, we’ll have some time left in the hour to have a healthy Q & A with the group.

So as I said, I’ll kick it off with a quick introduction of Acquia. For those of you who don’t know Acquia, we’ve been around for almost seven years. The gentleman who invented the product Drupal, which is the largest open source content management solution on the planet, started Acquia in 2007. We’ve grown very rapidly as you can see. We’ve grown 250% over the three-year compound annual growth rate, lots of customers. We’re growing rapidly from employee-bases with offices not only here in the United States but also throughout the globe. We’ve gotten a tremendous amount of accolades over the last couple of years. A couple that was referenced is Deloitte’s Fast500. We’re the fastest growing privately held company on the planet last year as well as good accolades and strategic recommendations from Gartner and from Forester around not only where we are today but where we’re taking the organization into the future.

As I mentioned, the organization is founded on the backs of Drupal. So obviously, we have tremendous expertise in Drupal. We’re pretty bullish not only on Drupal but the overall C-change within technology around the adoption of open source across the enterprise. So we have just some quick stats here on our Drupal relationships. We contributed a lot back to the community. We feel like that’s very important. We have tremendous amount of modules and as I mentioned, Dries not only started and invented Drupal but also helped start this company. We’ve built the organization out very thoughtfully over the seven years, bringing in executives from all parts of industry whether it’s enterprise software, consulting services, the agency world, and you can see where some of these folks have come from in the experience section there.

As I mentioned, Drupal is the largest open source digital community and the largest overall open source community on the globe. Many, many sites as you can see are being powered by Drupal and these sites are doing – these can be internal sites, they can be commerce sites, they can be internet of things sites, as well as sort of brands site as well, but a huge depth and breadth. We feel like our customers in small, medium businesses as well as the enterprise, gain a lot from this massive adoption of Drupal because the more people that adopt it, which means the more people are developing and adding products to the community. We feel as though customers who standardized on these types of solutions can innovate faster than maybe some of our partners in the enterprise space.

So, I’d like to then kind of jump off to some things that we’re seeing within the industry. It’s a unique time to be in digital today. Commerce today is evolving rapidly as rapidly as I’ve seen things. I’ve been in digital for 20 plus years and we’re seeing lots of interesting trends happening out. When we started talking about e-commerce solutions, it was typically a departmental initiative whether it was a webmaster or someone on the technology side who was maybe trying to push a boulder up a hill around an e-commerce business. Today, we’re seeing board level edicts from Fortune50 down to enterprising digital-only customers who realize that digital is their growth channel and e-commerce is their growth channel and that sort of business level sponsorship is driving interesting investments in the space. With the amount of places where a consumer can engage with a brand today, whether it’s on a handheld device, be it a smart phone or a tablet, whether it’s on a social media channel or quite frankly, if it’s in an internet of things or an internet-enabled vehicle, brands need to step out and differentiate themselves. They can’t just take a catalogue and put it online and throw a couple bucks at Paid Search and feel as though they can be in the e-commerce business and in the digital business. So what we’re seeing is brands doing interesting things and we’ll speak to one of those brands today to kind of marry and really get the ethos of the brand into the overall shopping experience whether it’s on site or on third-party retailers as well. Finally, based off my first point, we’re seeing that organizations are having to evolve internally to support the demands and needs of digital today. I mean historically, maybe it was a marketing silo and maybe marketing didn’t interface really well with technology. This is truly a cross-functional group of merchants, digital expertise, technology that now need to come together. We’re seeing organizations having to transform their businesses and transform their companies to deliver on these promises.

As I mentioned, digital is truly changing how companies exist quite frankly. New market entries are entering into the space and are causing major disruption, traditional brick and mortar retail can be challenged if they don’t think through maybe a digital first or a true multichannel approach. So historically, it was very much a silo-based process that our customers would go through, right? They’d get the brand out there. They would merchandise the product which would lead to some level of retail acquisition. Now, we see there are multiple touch points and these things are much more integrated today. So the brand owned versus the brand influenced model has evolved.

Why is that happening? Well, we feel there are many irreversible trends that are happening in the marketplace today. This stat shows just massive adoption of smart phone and mobile phone. Obviously, that has direct ramifications to everyone on this call, on this webinar. Consumers now have the web wherever they go and they can engage with - and not only engage with your brand wherever they go, but they can speak positively or negatively about their experience with the brand wherever they are.

That’s not only on the tablet - I’m sorry. That’s not only on the smart phone, but it’s also on the tablet. So you may have heard sort of the lean in or the lean back approach to communicating, folks having a tablet as they’re watching television with their smart phone next to them. Brands today need to figure out how they can be relevant across all of these different devices in a seamless and cohesive way.

It’s our perspective that brands, as I mentioned, they need to provide an integrated digital experience. These things have to come together seamlessly and they’ve very complex. They’re complex because they’re in different silos within the organization. They’re complex because content can be spread across the organization. They’re complex because they may not own the end destination point of where the consumer is engaging with their brand. So customers today need to take a step back and figure out how they’re engaged across the entire digital life cycle for their customer.

As I mentioned, the folks in the business need to transform how they think through the customer, how they think through the brand, how they think through their product messaging if they’re product merchandising, how they think through listening to feedback from customers, how to handle customer support and customer complaints. We feel as though it needs to be done in a more integrated way as opposed to the silo way that is happening in some customers today, but unfortunately, most customers today that we talked to feel that they’re not ready for this. Obviously, this explosion in digital, the sort of retrenchment on retail based on the market collapse in 2008 and now this acceleration into digital have left organizations ill-prepared internally to really take advantage of the opportunity and really support the consumer in a way which he or she expects to be supported today from a brand engagement perspective.

This trend that we talk about is not specific to the consumer and is not specific to B2C. Business to business commerce is also evolving. At the end of the day, the person on the procurement side, someone in an MRO, someone at a manufacturing and distribution, they may be buying products internally in a B2B world but they are a consumer. Their expectations are being set by Google and by Amazon and by Apple. Oftentimes, the B2B experience falls far short and we’re seeing a tremendous amount of investment in this channel as well.

The smart B2B folks are ones who are applying B2C tactics, B2C digital marketing tactics appropriately in their B2B business. So the ones who we think really understand it are appreciating and embracing the fact that the B2B buyer is a consumer but were applying the right tactics to the right channel

At the end of the day, it’s a proven fact that the more channels a customer has and the more that they’d take a step back and understand the different touch points a brand could have with the consumer and deliver a cohesive experience, the more revenue that these brands can expect to see. As you can see, folks who we think do it and the analysts community doing it correctly, you can see a 44% increase in AOV which is, as you know, one of the most important business metrics in the e-commerce world today.

So that’s just a quick snapshot on what we’ve seen on some trends that are happening. I’d like to hand it over to Myles now to have him step you through a great customer example of someone that we’ve collectively worked with that has evolved the brand and now created what we think is the best in class experience, not only around their current products but have positioned themselves to enter into new markets based on the agility of their business model and their platform. So Myles, I’ll hand it over to you.

Myles Davidson: Ray, thank you very much. Yes, that’s great. It really helps, I think, set the scene and I get fascinated picking up some of those items because we just have the same observations. Hopefully, let me express those through a very relevant case. This little story right now is about lush.co.uk. We’re going to explain who Lush are very soon. A little bit, just to introduce me as well. So as it was said earlier, I’m Myles Davidson, the managing director of i-KOS. We’ve been into Drupal since 2007. Since 2007, we’ve been in to e-commerce but as we’ve seen, our business has transformed in 2014. We’re all about commerce, content, and community leverage in Drupal. We worked for some great brands and Lush is one that we’re extremely proud to have worked with.

So let’s go through some of the stories. By context and background for anyone who doesn’t know Lush because they have a different footprint globally, that they are a highly ethical business. Now, let’s just read everything but they’re all into natural handmade cosmetics. They are headquartered in the UK, which is why you’ve got someone from London on the phone, but there are 910 stores in 50 countries and they’ve got a pretty big turnover. This website, they see as being absolutely critical to their growth plans.

So what were the goals of the project when we started? Well, it sounds like a strange thing to say but more than a soap shop and that maybe slightly UK-centric. If anyone knows the retail stores, they have a really strong smell. You can normally smell it several stores away. You’d get that very overpowering shop in the retail work and that’s really distinctive. It’s a key part of their brand, but actually, what they really need to do and what became fascinating working really closely with the Lush digital team, was to understand that the level of story that sits behind so many of their brands and their ethical values. They just don’t treat ethical programs as a badge to just sign up to. These guys often, when they go and source products, they set up and they manage and they run schemes. Their whole philosophy is to improve everything in their value in their supply chain, which is just wonderful. So really, everything about their kind of goals so I’m going to just say was what they’re looking to do here is that they used the UK as a flagship site to actually create a digital push to improve its global brand presence. As we will see, they’re really doing this through content and deli-style cosmetics. Yes. So there are lots of things in there around about what we’re looking to do and even the soap box. They’re very well-aligned to campaigners and certain charities and they really want their website to also be a platform to talk about issues that are important to their business, issues such as climate change and human rights. They really want their website to engage with people, not just their customers but with people, who are aligned and believe in some of the things that they really believe in so strongly. As we’re hearing from Ray, the story partially of choosing Drupal and the story we found out was with those goals, they absolutely wanted this content-driven commerce experience. I think this is a huge philosophy. That the whole point was every fresh ingredient has got a story, how it’s sourced, what’s in it, and every product has got an inspiration. When their products are made, you see the little sticker on it. It tells you who made it and when it was made. It got these great stories they really want to tell. Community, they’ve got some lovely ideas that are coming up fairly soon. They’re going to be launching fan clubs and that going to be based for the loyalty, it’s not based on price but it’s going to be based on exclusivity. I think that’s really important. All these things are just really important. How, as a brand, they were looking to use digital to absolutely stand up and be clearly counted for what they believe in and really engage with people.

So a little bit about Drupal and perhaps why, where, and how Drupal was chosen and some of the really big criteria that when it came down to it where Drupal wins. I think there are some good points that you can see on there. Yes, a unified platform to manage content and commerce. Yes, what we’re doing in the UK has to pave the way for a global program. Yes, the powerful – in fact, I’m going to take the last two bullets points the other way around. What was really important, design was no way could that design could be inhibited by technology. So a quick shout out to Method. It was the design company who came up with a strong, wondrous design. They took a lot of discussion and lots of convincing to make sure, they wanted to know if in any way will the technology inhibit the design. We proved that it wouldn’t. The website stands great testament to that. Also, I think but what they want there, of course, what the business needed was a really powerful content curation and a really great experience, too. They wanted both sides of the coin. They wanted the fantastic customer experience which couldn’t be held up by the technology, but the business also needed to be able to support that, manage the content, add their new stories, and engage with their people. That’s really where Drupal has, without a doubt, absolutely won wonderfully.

I encourage everyone after this to have a real good look at the screen on whatever device you want to look for it, but just to explain this content and commerce. So what does that really mean to some people? Well, the homepage I think is a great example. Let me just give you a little roll call of what the homepage does and what it delivers.

So the homepage, it blends content and commerce. To give you this sort of content items that’s on there. We have hero products and we have products. We have hero products combined with their reviews and this all fits alongside ingredients and the ingredients that you used within certain products. We also have information about the key values to the business, and we have frequently asked questions, and we have collections. We also have features and featured articles. The really kind of mind-blowing and I think the wonderful part about all of this is all of those items fit beautifully within the design framework that just works on every device that we’ve tested it on and that’s putting it out there. The management of this, all of this information is just curated and is beautifully linked or to use a phrase that I love so much is it’s deeply intertwingled. So I just thought it’s worth labeled on this slide a little part to say what they’ve actually done is create a lovely editorial end product but it’s all link through its sort of taxonomy and classification, and it’s curated easily readily by the customer. I think that is just incredibly important. As Ray was saying earlier, this is a project and it brought together some great domain expertise. I-KOS got the joy of leading this project, developing this project, and providing solution architecture. As with the projects of this size, we absolutely looked for the main expertise brought in and worked alongside in a consulting capacity with Acquia, deployment, hosting. What’s great is that we’ve now got this Drupal project sitting on a platform that’s got the full 24/7 support.

I think it would be remiss not to mention a couple of other partners. We have Method, I mentioned, who did an amazing job of the design and I know we talked about how we worked with those guys and Commerce guys were brought in for some really great expertise around some of the module development on the site. So just kind of what made this project special and this was super hard because I was challenged with the idea of just to pick two things so that we could make sure this didn’t take too long. On the project that we were so proud of, I think we could have picked personalization, how this works with a returning customer, the experience that they get, but I’m just going to pick two parts that I think just showcase some uniqueness to the project. That’s what we call the live style-guide and the kitchen concept. That’s my section. Once we ran through this, I’m pretty much done. So let me dive into the live style-guide.

We retrospectively call this an absolute key to success. As I said earlier, we’re working alongside a design company and this was a very strong design, visually led project from the get-go with lots of ideas. Not only did they have to work across devices, when you look at the side, we’ve got things moving. The homepage moves in about four different directions based on swipe, touch interaction. This presented a lot of challenges for any technology so what we actually managed to do on this was we created what we called a live style-guide or which later became known as the front-end framework because what started off as a method approach typing in doing a proof of concept became the actual front-end code base that allowed us to look at a few points here. We could really test some of the interactive design in the browser. We worked alongside in an agile fashion with the designers, really got things moving fast. It was a really great way to test things out, not just test out the interaction because working with the design agency like Method, it’s not just about things moving, it’s the speed they move, and the feel, and the touch. It was wonderful to be able to deliver the level of tactile visual concepts using this front-end framework or this live style-guide, test it across browsers and device. We know this created a great ROI in the whole project. There’s no doubt about it. This helps.

We’re going to do some - if not podcasts, some blog posts about this in great depth and show a lot of detailed examples of how we kind of brought this whole project down, how we tested it in multiple different ways and how we think this has presented itself as a real beacon of a great way to work. I would say almost in any Drupal projects but it’s the only Drupal project that’s responsive. In case it wasn’t clear, I think there are six break points, seven resting states of this size at the site. Everything on it has been pretty much handpicked and customized.

One of the other things, so the second part, what makes this unique? Well, I think the kitchen, the deli style cosmetics. This is literally a physical kitchen. At the moment, there’s one and I think there’s going to be multiple. You’ve got a kitchen where they’re all making fresh for the day, one or two key products of the day. This is going to become really interactive. They’re going to have Google Hangout integrated. You’re going to be able to follow it on social media. They’re going to make products, they’re going to be able to literally make products live. You’re going to be able to interact with it and you can order that product. It presents some interesting e-commerce challenges as well because you’re talking about the rapid putting up of products, limited stock runs. If I just look at the next screen, yes. This is creating demand really fast and we think already we’re going to see cases where people are just ordering this stuff quicker than it can be made. That’s really exciting because that creates – that’s digital creating a real world problem that can be solved. I think one of their big challenges or one of their big aims here is that this kitchen is not only getting people excited in seeing things happening in real time, that you can order and get it delivered tomorrow, but they’re also testing out and trialing new formulations and new products. So it’s small batch productions. I think what we like building into this part of the interaction was a real sense of urgency. This is a little slide-out which feels very much like an app when you’re using it on a tablet. This just comes out from the right-hand side and we automatically know in this case, this happens to be a kitchen product. It’s a pre-released product and therefore, we’ve had this flag that says, “You have a time limit to your product in your basket. Make sure you check out soon.” That is definitely helping to create a sense of urgency of the experience and something that feels really unique. It’s permeating through the business in so many different ways. Social media is really picking up and they’re engaging with customers so it’s been a great part of the journey.

I think that helps keep things on time because, believe me, I think we could have picked another 10 great features. So we’re going to stay on with Richard who’s the technical director in case any questions get on a more technical note. Please link with us on social media because we want to keep this conversation going and we’re happy to answer questions as they come.

Ray Grady: Thanks Myles. This is Ray. So I think we wanted to make sure that we could give you a sense on the industry, specifically what we’re doing with this customer. We have other interesting customer examples that are leveraging the power of the partner ecosystem that Myles talked about as well as the technology to not only tell a better story and allow brands to become storytellers but also allow them to be very innovative as they think through new ways in which to not only develop products. Products that may be a digital first introduction or a product launch, but market those products - not in real time, but in a much more iterative and rapid fashion based on some of those solutions that we bring to bear. So with that end, I’ll hand it over to the group and we can maybe start the Q and A session.

Kelly O’Neill: Hi all. This is Kelly. I’ve got a question that’s come in around for you Myles just to talk a little bit about what’s next for Lush. So you mentioned this was a relatively recent go live. What plans do they have for the next round of featured functions and evolution of the areas like the curated products?

Myles Davidson: Yes. So there are a few things that are coming on-stream quite soon. Richard is here too so I’m going to prompt him as well. I know that we have an algorithm-based recommendation engine that’s going to come in that’s all based on site-wide user behavior and your personal user behavior. That’s really question of - that’s delivering very much the Amazon style, matching one product with another, but it’s all based on learning. It’s just product learning so that’s coming. That’s going to be coming on-stream. The kitchen which is the whole interaction make-up part, they really want to build that. They want to embed - They’ve met with Google and they’re looking at a really engaging way of using Google Hangouts so that you can literally see the product that you want to order being made and you can really feel like you’re a part of that whole experience. For a brand like Lush, they’ve got some really interesting things, it’s just that they never discount on their brand. They just don’t do it. They don’t do coupons. They don’t do sales, but what they absolutely want to do is they recognize that they’ve got some very, very passionate – they’ve got super consumers, really passionate people who love the brand so they want to absolutely, “We have to offer these guys exclusivity.” So we’re going to really see a ramp up of the small batch productions, the deli style cosmetics, and really providing exclusive, unique features to the people who love them and keep coming back to them. So a real nice rewards program and this is all what’s coming next.

Kelly O’Neill: Excellent. Thank you for sharing. For those of you on the line, if you have any questions, you can just enter them in the chat window as a reminder while we wait for others to come in.

Another question from the group was for you again, Myles. Can you talk a little bit about kind of the life cycle of the project? How long did this take? You shared the design side, but were there other learnings in terms of working with partners to bring this altogether given the number of partners that were involved?

Myles Davidson: Yes. The most significant size, the most stakeholder projects and multifaceted projects that we’ve been involved with, the full aspect of the project was almost a year. It initially started off with Lush who was looking for a totally different project. They were out looking for Lush TV and they found Method because Method had done the design for TEDTalks and done a lot of the – and they met and they started talking about this. This little side project started around Lush Digital and actually, we should be looking at more than just a TV stream, we should be looking at the main website. The first we became aware of this was around July 2013 and at that stage, there was already a sort of proof of concept, visuals, and then a non-coded but interactive design piece. After seeing it, it was like “Wow, how is that’s going to be built?”

There were incredible ideas [Laughter] that came about here. I mentioned that job before, so what really happened is we went into a discovery route, a six to eight-week discovery and definition phase working really closely with the designers, with Lush, and ourselves. We worked with Acquia as well, we did some workshops - in fact, a lot of workshops. I think that’s a key part of this project. Everything was workshopped out extremely well. Then we ran two sort of concurrent agile streams. So it’s the design stream running for two weeks and we had our front-end engineers join that and we’re building that style guide with the designers. Then we got to see the output from that design stream and we were involved in helping shaping it to make sure that some crazy ideas didn’t come up that couldn’t be delivered. It was kind of – you design it in two weeks, we build it in two weeks. So [Crosstalk] that’s an easy turnaround.

Richard Jones: I think Myles and I are on audio now. Hi. Yes, it’s Richard here. So yes, one of the most interesting things about this is the design process was carrying on all the way up to three months before launch because it was an agile process iterative between us and the designers. So we were working directly with them all the way through. So it wasn’t like your conventional designers who designs off then an agency comes in and builds it. It’s very much interaction between all of us, all the way through including the client. So I think that was the most interesting part, for me it’s that we had that back and forth and the ability to influence design decisions, where we can look at something and say, “You know what? If you just did it like this, it would take a week less to do,” and then being responsive to that kind of thing really, really helped this project. As I say, it meant that we were still iterating through the design using the style guide that Myles mentioned earlier all the way through to the end.

Kelly O’Neill: Okay, thank you for talking us through. I know that we really enjoyed the process as well and one of the areas that we particularly got involved in on, it was on the search side and working through some of the innovative ways you do a leveraging search to draw out category pages and things like that. So the team really enjoyed working in that iterative process. Another question from the field and the related topic was specific to the commerce guys and what their role was there. So if you could expand on that a little bit, that would be great.

Richard Jones: Yes. [Crosstalk] Can I jump in a little bit as well?

Myles Davidson: Definitely.

Richard Jones: Yes. We had the Commerce guys with us all the way through the project. So we had permanent members of Commerce guys within our spring team all the way through. So the idea was that they would be helping us directly with working on the commerce-specific modules that we were building. I’m just adding a little bit to my expertise in as well. So yes. All the way through, we had a couple members of commerce guys from the London commerce guys team with us directly all the way through the project.

Myles Davidson: Yes, that’s correct.

Kelly O’Neill: Excellent. One of the other things I wanted to drill in on is the plans around more of the social side. You mentioned about the ardent fans that the brand has. Are there plans specifically to further leverage that? Any thoughts around integrating more social information and content as the brand evolved?

Myles Davidson: Yes. In fact, let me start on that Richard. I’m sure you may have a slightly different one.

Richard Jones: Sure.

Myles Davidson: One of the things that I should have mentioned is already implemented and which we really love is all of the Lush stores in the UK, so when they go to the main shop, you don’t – I love it. You don’t have a shop button, which is what this webinar is all about, killing off the shop partner. You do have a shop button which is the physical retail stores. What we love about that is that there the store manager has access to the shop page so the opening and closing times and key information is all managed directly through Drupal for that particular shop. They also get to put that shop’s - all of their social feeds go into that. Their Facebook, their Twitter, their Instagram. They’re really big on some of this, especially things like Instagram, it’s a really big one for them. I think two of those three are now already in. So they can just add the local part and then that way, they’re also able to build up social engagement on a local level. That’s really important to them because some of the campaigns I talked about earlier could be really localized and they want to be able to have communication both on topic level or company-wide level, campaign level which there is a lot of their content and articles, but the reason you’ve got this micro-store level social engagement and you can do that. You can go to the stores, you need to look at it from a UK perspective so maybe just type in “London” and you can see a whole bunch of stores. Pick one of the shops in London like Waterloo and you’ll see the details and you’ll see the local social engagement which we think is – we just think that’s a really great use of engaging with people at just lots of different interesting levels.

Richard Jones: Yes. One other thing with this is that they tried to give a personality to the individual shops as well. Because you see, a personality is very much what this brand is about. So, yes. We’ve got a combined mainstream social media element to the site, which is on one of these pop-out sidebars and then each individual shop has their own feed which, as I said, strikes their own regional and local personalities all the way through.

Kelly O’Neill: That is a great example of driving multichannel, across channel, omni-channel, whatever buzzword [Laughter] you want to use, driving that consistent brand experience throughout all channels and leveraging the power of a really flexible digital platform to be able to do that. So those are the areas where I think we’re going to see incredible innovation moving forward. So it’s great to see that Lush is already moving down that path. So, thanks to Myles and Richard for telling us the Lush story and bringing that to the webinar today. Thanks to Ray for setting up the market trends and for all of you on the call, we’d love to continue the conversation so please by all means, reach out to us either email, phone, give us a call. Let us know how you’re evolving your digital experiences moving forward. We’d love to continue to help you innovate and move the market forward.

Ray Grady: Great. Thanks everyone.

Myles Davidson: Yes. Thank you so much. It was a pleasure to be a part of it.

Preparing for Acquia Certification [April 23, 2014]

Click to see video transcript

Hannah Corey: Training sessions on Preparing for Acquia Certification with Heather James, who’s the Manager of Learning Services here at Acquia and Prasad Shirgaonkar who’s the Curriculum Developer here at Acquia. We’re really excited to have both of them on the call today.

Heather James: …for the Acquia certification, and we’re going to be looking at probably if we’re taking the exam you probably want to know what it’s like and if that is the case, then this is definitely the right place for you. I want to talk with you first today about the goals of the exam, you know how we actually chose to focus on specific skills, better actually outlined in the exam blueprint that’s probably available. Then, I’m going to hand it over to my colleague Prasad. He’s going to talk with you about the kinds of questions you’ll actually encounter on the exam and how to find your weak areas and how to improve on them. Finally, we’re going to look at the resources available so you can actually improve on your skills. I’ve actually been – I’m Heather I should say. I’ve been using Drupal since about 2002, using the early 4.0 releases. I’ve actually been with Acquia since 2009 on the training team. So, this certification idea has been a long ongoing discussion within the community, and I’m really excited to see those plans result in a program that I’m really proud to talk with you about today because I’m just amazed to see it come together. How about yourself Prasad?

Prasad Shirgaonkar: Hi. I’m Prasad. I’m a Drupal since 2006, Drupal 4.7 dates. Prior to joining us here, I was running my own Drupal service shop where I look on where 200 Drupal projects for clients on almost 12 countries in four years. Since last year, I’ve started doing full-time Drupal training, and I have conducted numerous workshops for individuals and in the price clients. Currently, I work on developing and conducting training programs for Drupal and Acquia products. I was also a part of core team, which made the certification program. I’m very excited to share a few tips about preparing for the certification in this webinar.

Heather James: That’s true. I think that’s what’s really great about your experience, Prasad, because you have been a developer for a long time. You had your own business and then as well you’ve been able to see how it is when you actually start training people. We’re going to hear a little bit about the – how we prepared it and some of the folks that have been involved in the program.

Prasad Shirgaonkar: Absolutely.

Heather James: Yes, it’s definitely good. Let’s look at the program and how it’s structured and what to expect. We actually have two tracks planned, but one is available right now. Specialist tracks are planned for front and back-end development, but our first certification track is for the common skills that any Drupal developer needs. For this first exam, we spoke – we sort of focused on those the skills that were common to the specialist and really required for most key roles in Drupal development. Further details are available on our certification pages and I think you know – I think one of the great things actually about the program is that you can either take the exam at a test center in person or you can take it online as a proctored exam observed by a real person. During that time, either in either case, you’re going to get 60 questions that you can answer in 90 minutes, which should be ample time for you to complete the exam. It costs $250.00 and you can register online.

What I’d recommend is that you watch your previous webinar with our colleague Peter Manijak. Today, we’re really picking up where that webinar left off. In that recording, you can find out details of what it’s like to take the exam. Peter also gives practical tips and follow - answers questions about what the online versus in person exam is like. The links that are in the slides here are going to be sent in the follow up e-mail that Hannah is going to post, so you’ll be able to download the slides and get these links. Next, we’re going to – so the first step really on the process of preparing for the exam is to understand what’s the point? What’s the goal of the exam? Understanding this will help you understand how the exam can actually improve your job prospects and get new opportunities. On the other hand, if you’re actually hiring manager yourself, it will help you understand how certification will help you build the team you need for successful Drupal deployments.

The goal from the very start was to be something that was effective and that we could stand by. We started by actually researching and comparing actual job descriptions out there in the wild. Things that were posted by our partners and our clients, and this helped us see what roles are being filled. We then validated that by interviewing our clients, partners, and our colleagues to see what matched up. Then, we used a job task analysis survey and that detailed specific skills in use that actual hiring managers were seeking. The whole point of the exam is to be able to say that at this point of time, we validate that this person has these particular skills. We know that these skills are those that are required and in need. To that end, the exam touches really on all areas of Drupal core architecture and extending Drupal.

You’re probably wondering right now if this exam is right for you. As you’ll see in the exam blueprint following, the certification does cover quite a breadth of knowledge. Many of the situations described in the exam would be things that you probably encounter through your own experience rather than technical knowledge or I should say not technical, theoretical knowledge. This means exam really isn’t for novices. We are considering other assessments to help people in earlier stages of their careers, but you would need to get some more hands-on experience if you have say, less than six months experience to this point. However, if you do have more than six months experience on real life Drupal projects, you should definitely take the exam and be confident that this is right for you. Those who have more experience than that should be able to test out quite easily actually.

Let’s look now at the details of the exam blueprint. The blueprint explains the top level domains for the exam. As you can see here, you can see how each of these knowledge domains makes up a certain percentage of your total exam score. You can see the components are actually broken down further online. Look at this blueprint when you start to look at the details of it, you’ll see that it really is requiring a fairly good understanding of those three core Drupal demand cycling, front end and back-end development in order to be ready for the exam. Because the past rate is fairly low, I mean if you compare it to other certifications, it is 65%. We provided some leeway for specialists. What we want to see, our developers who really understand the other domains because we’ve discovered that’s quite essential for a successful Drupal development.

What knowledge is needed? As you can see by the way things are weighted, you can tell a really aiming for balance with this exam. So, if you have the name recycled in your role without any knowledge or understanding or experience of either front end or back-end development in Drupal, you will need to take timeout and systematically learn those domains. Take time, take formal training and we’ll look at some of the resources that are available. Some of our relay, if you’ve only been doing front end or back-end development, you’ll know maybe somehow on your – if you’ve got a larger team especially people find their skills are siloed because of the task they’re given to do. They should – those people should take time to understand Drupal site building as well. Of course if this knowledge is needed and required, you’re probably wondering how we actually test for it in the exam, how we actually look at the specific areas. I’m going to pass it over to Prasad now, and he’s going to talk to you about all the different kinds of questions you’ll encounter.

Prasad Shirgaonkar: Yes, thanks Heather. Now, we know the exam objectives and the exam blueprint, you might have got an idea that we are almost covering all the three major domains of Drupal. That’s the Drupal site building, Drupal front-end development that’s teaming and back-end development that’s more your development. We know what knowledge is tested in the exam. Now, let’s see how this knowledge is going to be tested. We can do that by understanding the nature of questions. Typically people think of questions, of multiple choice questions as something like you are say, expected to remember the syntax or you are expected to memorize a few things. Let’s have a look at the nature of question that we have in the exam.

Basically, we are asking the nature of questions. They are all scenario-based questions? There are three parts to each question. There is the scenario, a question, and the options. A scenario actually describes a situation with the used case or a client requirement or possibly even an issue on a Drupal site. Then, a question is asked about the scenario or the problem. There are four or more charges given for possible solutions from which the candidate needs to select a correct answer or possibly multiple correct answers.

Let’s, have a look at a sample question. The scenario says something like this but you are running a popular local news portal. A mobile app developer in your area approached you for permission to syndicate your content on their mobile app. Now, they are requesting the content to be made available as a feed rather than an HTML format. So this is a typical, practical scenario or practical situation which you might encounter as a Drupal developer. Then, the question that we ask is that how can you provide a list of latest articles in RSS format? Then, the answers - the choices are to create a view with feed display or create a view with page display enabling the RSS filter, create a view with page display by selecting the RSS feed as a display to style output or create a view with the page display and then modifying your template file to provide output in RSS.

Obviously, only one of the answers is the correct answer and there are previous factors, which are like meaningful or wrong answers actually. So, you have to select the correct answer, discarding on all the incorrect answers.

If you look at this sample question, you may realize that the questions rely on application of Drupal concepts and knowledge rather than purely memorizing the facts, code or syntax. Now, this essentially means that just reading through the long list of documentation or books would not be sufficient for answering most of the questions. You need to have the real experience or understanding of sufficient number of used cases, applications, common scenarios in a Drupal project. Possibly, even support request and issues that they are handled in the past. Once you have all these information, then only you will be able to answer the questions which are asked.

If the nature of the exam is off this time, then how do we prepare really? What we suggest is actually first day of preparation is to find out your own strengths and weaknesses in the area of Drupal. Actually, a truly experienced Drupaler will likely to know his or her weaknesses much, much more than their strength. Now, after looking at the domains of site building, front-end development and back-end development, you might have made a judgment about where your own skills stand while reading the full domains listed. Now, it’s quite natural for a person to be more experienced than more proficient - but not the domains than others. For example, if you might be a very proficient site builder, you might have the lots of sites building using the UI, but you might not have developed the module. You might be a very good themer or UI builder but you might not have a well – done a lot of site building configurations. Same is for about module development. You might be proficient PHP developer, developing a lot of module, but might not know anything about Drupal theming there.

It’s quite likely even within a particular domain, not to have enough experience of all the topics. What we have come up with is that you have developed a small self-assessment tool, which you can access at this URL that’s bit.ly/acquiasat. That‘s the self-assessment tool. This is how the tool looks. What we have then is we have taken the list of all the exam objectives, including all the sub-objectives like in-site building like demonstrating the ability to create content by its sign, everything that we are covering in the exam blueprint. Next to each, actually you can put your own score in the area of zero to 10. Zero for the – we absolutely don’t know anything about an objective, and 10 if you are like master in that particular area. If you do that for all the exam objectives, rank your own skill for the exam objectives, and then you will come to know that anything which like having 8+ score, which implies your absolute strengths, anything between five to seven that implies you require some preparation for those objectives. Anything which is like less than zero possibly will require a lot of preparation or guided instructions for that.

The first step for actually preparing for the exam is to do a self-assessment overall the different objectives and find out where exactly you stand, so that you can plan your own preparation.

Now, of course once you know your weak areas, the next step is to work on your own weak areas. Let’s assume we will share some tips about working on site building if that’s your weaker area or front-end development or back-end development, all the three top level domains. Of course if you have basic HTML, CSS, and PHP as your weak area then you have possibly a lot of resources online about HTML, CSS and PHP preparations. We have nothing to talk about that. We’ll be focusing on the Drupal. If anyone of these three domains is your weak areas. Lets’ talk about site building if that’s your weak area. Before that, basically once we start at the – once you decide to work on your weak areas, there are two challenges that you are likely to face. The first one is to find and study documentation and knowledge resources for the topics from your weak areas. The second one is to find enough number of practical case studies covering the topics. The first one will be solved when we are actually sharing a list of resources, which are mapped to each exam objective.

You can go to those resources. I will share the link at the end of this webinar. The second one is a real challenge, is to find enough number of practical case studies covering all the topics. Let’s talk if your site building is your weak area, what exactly you can do to prepare. We suggest a particular way out. Now, select any three to five Drupal projects which either you or your team has done over last a year or so. Collect all the teams, review all the configurations and settings. Review content types, fill settings, refill settings, vocabularies, blocks, menus and views used on all the sites. Possibly you can even make a list of all the configurations made across all the sites, and just ask questions about each type of configuration that why the configurations are the way they are? What can be changed or improved, possibly work issues or support request were raised by the clients for those projects, what changes were made into the initial configurations and why those changes were required? This can possibly give you enough overview of all the different types of issues that were faced by your team across various types of Drupal installations and Drupal configurations. Of course, if you rated that along with the resources list that we share, we can actually gain a lot of insight into site building activity of Drupal if that’s your weaker area. What if front-end development is your weak area? This is just a similar approach, you can actually collect custom themes developed by your team over the last year. If you don’t have enough custom or themes developed by your team, you can actually select a few contributed themes from drupal.org.

Analyze those themes. Find out the templates which are used, the TPL files which are used. Review the CSS and redo JavaScript, review any pre-process functions implemented by the teams, and then ask the questions that if possible even gather the source, designs or wireframes, which were the specifications for those themes. Then, ask questions whether the themes were implemented exactly as per the designs. If not, what changes are required and why. Review the theme regions. Just ask questions whether the regions are optimum, is there any redundancy, can you reduce any other regions, can you add any regions? How regions are exactly implemented on the themes. Are there any specific theme settings being used. How CSS and JavaScript files are being called in the themes, and are there any other pre-process functions being used, could they be replaced with something else or could any other output be replaced by pre-process functions. Also review the template files or find out whether there are any template suggestions or custom template files implemented and the reasons behind those. This can give you - again reading this along with the specific documentations, for theme settings, for theming profiles, for theme regions, and pre-process functions, can give you a good overview and understanding of front-end development domain.

However, when you go to back-end development, a similar approach for studying may not be useful because your team might have developed possibly a few custom modules over the last year, but for custom modules, they might have very complex functionality or might have a very used case specific functionality. What we expect in this exam is that you have an overall understanding of Drupal’s API, core hook system, and their applications. If you haven’t done module development at all in your life and still want to attend this exam, of course you can prepare for this. Preparing for module development is actually easier than preparing for site building or theming, which are like last areas. For module development, you can attend the module development course, possibly you can build a small module on your own and explore all the APIs given. Actually, there is a module called as Examples Module in Drupal. You can download that from drupal.org/projects/examples that provides a very documented list of all the APIs or lots of APIs and lots of functions, which you can implement in your own module. You can actually try out some code in action and explore various aspects of module development.

These are the three different ways in which you can prepare for three different domains for site building. Collect or just get information of three to five main projects done by your team over the last year, go through all the configurations, review configurations and ask a lot of the brainstorming questions and find your answers online. About theme, similar theme, collect three to five good themes developed by your team or good contributed themes. Analyze those themes and ask a lot of questions and try to find out answers online. For module development, if you haven’t done module development then actually develop a module, develop a small module or attend the module development course. So, that’s how you can prepare for this exam or any one of the domains, which you are not proficient in the exam.

Once you prepare, once you are ready to take the exams, we’d love to share some tips about taking the exam. Now, as Heather said in the beginning this exam can be taken either online in the proctor or at the exam center. If you are taking an exam at the exam center, make sure you find the right address when you register from Webassessor. You can actually select an exam center which is closer to your location. Of course, just find it on the Google Map, plan your travel properly. Make sure that you arrive at least 15 minutes before your scheduled time. You need to bring the copy of your registration e-mail, so that there is a call with that exam center operator needs to know to activate your exam order. You also need to carry a photo ID, like your passport or driving license or whatever photo ID is accepted in your region. If at all you need to reschedule, make sure that you reschedule it at least 24 hours prior to your designated time. This is what would be the required at the exam center. Also, make sure that exam centers may have strict rules about keeping your belongings or keeping out your mobile especially or taking breaks during the exam. Just make sure that you understand those rules by talking to the operator. Also, the operators at the exam center are neither Drupalers, they are not Acquians, so they won’t know anything about the exam or the certification. They won’t be able to help you if you have any technical questions regarding the exam over there.

If you are taking the exam online at online proctored exam, you need to install a specific software from webassessor.com. Check the system requirements by logging into webassessor.com. Make sure to install necessary software at least one day before the scheduled time. Currently, the software doesn’t work on Chrome on Mac because a Flash related issues. So, you need to get either on – if you are on Mac, you need to take it either on Safari or Firefox. You install that software one day in advance. At that time of taking the exam, you need to select a silent room or possibly a silent corner in your office where no one is – nothing is going to distract you for 90 minutes at a stretch because you can’t take a break in the exam once you start the exam, or you have to finish it within 90 minutes flat.

Keep a bottle of water handy. That’s very useful when you’re taking the exam. Switch off your mobile phone. Keep it far away from you, so that you are not tempted to take mobile. Last one is that don’t use two monitors. Just use your laptop or desktop’s primary monitor only. Don’t connect to another monitor. This is an online proctored exam in the sense that when you are taking the exam, some real person, somewhere sitting in the world is actually monitoring what you are doing. This is to make sure that there is integrity of the exam is maintained well and we are not doing following any form of, say taking help while taking the exam from others. That’s why the proctor needs to make sure that the person is completely enrolled in the exam that’s why mobile phones or using two monitors and things like that are not allowed in this exam. I think these are the simple tips to follow for taking online exam, which will save your time and you can do exam efficiently.

Once you are either at the test center or you are taking the exam online, what tips to do when you are actually taking the exam? The first one is that don’t rush. Now 90 minutes are more than enough to answer 60 questions even if English is not your first language, it’s your second language, or from our experience or from the experience of exam takers over the last one month. Every minute given to you is done so that even if English is their second language it’s more than enough to read all the questions, understand the responses and give proper responses. So, don’t rush. There is no need to rush at all. Attempt all the questions for which you are sure about the answers first. So, basically start with the question that you know. The system allows you to save questions for a review later. You can always review all the questions later before you submit the final response.

For any questions you are not sure of the answer right away, just save it for review later and revisit the question after you have attempted all the others. The third thing about for all the developers basically is that don’t over think. If you have that enough Drupal sites, Drupal projects in your career and if you need a scenario, most of the times the first answer which comes out of your gut will tend to be the right answer. Just move with your gut feeling and answer questions. One thing I would like to mention is that there are no trick questions in the exam. It’s not your language test. So, we are not trying to trick you or not trying to give very strange language per se. They are very straightforward questions. So, take all the questions and to face value. We got some feedback from a few guys saying that for a couple of questions, couple of answers you will use choices look exactly the same, but when this happens, when you feel like two answer choices are exactly the same, just go to them again, review those exact same things and you will find out the difference.

These are the tips which you can – which will be possibly helpful for – if you are taking the exam either online or at the exam center. About the resources, I’ll pass back to Heather who will talk about the resources now.

Heather James: Thank you very much, Prasad. That’s a really good point. I’m going to talk about the resources. I think what’s interesting actually probably to know is that actually at each point on the – what we are developing in the exam but each point of the exam objectives. We needed to validate and make sure that the facts that we’re actually going to test were supported by published documentation and books. Those resources are actually the ones that we’re referring to. We can’t tell you what page it was on, but we can tell you that the information is out there and available from you to learn from. The resources actually are going to be summarized in this upcoming E-book, that’ll actually be out next week. If you’re watching this as the recording, I’ll make sure to update the recording page with a link to download it. The E-book is actually organized - the sections on resources are organized by the type of resource. There are first freely available resources from drupal.org. There are also published books. Then, we have separate sections for Drupalize.Me and BuildAModule. Drupalize.Me and BuildAModule are services that are available to our network subscriptions either free or with a reduced discount. The great thing is that you probably already have access to some of these things, and maybe books already on your shelf and we’re just going to point you in the right direction to various sections, et cetera.

If you do find yourself needing structured training, I’d recommend you check out our training courses on training.acquia.com, and there we have very structured training around theming, module development, and site building. They are fun. We very much – we try to make it - we create interesting problems for you. We use cases and make it not just hands on, but also let you think and be creative in the events. So at this point, I wanted to ask if anyone has any questions. You may have some questions that’s about the exam itself or you may have questions about some of the topics that are covered.

Hannah Corey: I’ll go.

Heather James: Yes, cool. Sorry, Hannah, pardon?

Hannah Corey: Yes, I had some questions come in. The first question is for the self-assessment. What total score would you suggest the passing grade on the exam?

Prasad Shirgaonkar: Okay. Can I take that, Heather?

Heather James: Yes.

Prasad Shirgaonkar: Okay. I think it’s a fairly interesting question and possibly a difficult one to answer because the self-assessment is done by that person understanding on his own perception of his own skills about each objective. The exam questions are – may or may not have the reflection of his own understanding. What we would suggest is that the total score, or the passing rate for the exam is 65%. So, you need to clear – have 65% questions correct in order to pass the exam. If you take that logic to the self-assessment, you would see that at least in the 65% areas – in the exam objectives, if you have your scoring, your own grading more than eight, then possibly that will reflect a passing grade for the exam.

Heather James: That’s a good point.

Hannah Corey: All right. We have some other questions coming. What Drupal versions are likely to be covered on the exam?

Heather James: We are actually covering Drupal 7 in this exam, so it’s fully on Drupal 7.

Hannah Corey: Great. The next question is, is there a link for the exam centers? Where can you find that information?

Heather James: Definitely, go to acquia.com/certification. There you can find a link to the exam center and registration. I saw another question actually come through asking will this exam have some trivial questions like this question came through and it says, will we have trivial question such as, where and what menu can you change permissions? That’s actually what we avoided. The global certification lead, that’s Peter Manijak, has a lot of experience in this area and to what he’s discovered and what he’s been able to share with us is that scenario-based questions like the ones that Prasad has spoke to us about and showed in this presentation help you solve a problem and see how you solve a problem I should say. They pose a situation in a context and ask you what you would use to either create a feature or debug something. That is far more interesting to us than can you remember the pass to - you know click pass to get something done. The truth is, we, nowadays as developers, have access to resources and documentation at our fingertips. We wouldn’t expect you to be able to remember some of these procedures off the top of your head.

Another question, I often hear asked is about the language of the exam. It’s actually in English. As you can see, there are 60 questions in 90 minutes. What we’ve been able to confirm, which is what Peter expected was that someone who’s a native English speaker can get through that quite easily in 90 minutes. Whereas someone who’s using English as a second language, they do need or require the full-time, but they do complete the exams. So, that’s why it is the length it is. Hopefully, that relays some of your concerns if you have them. Are there any other questions?

Hannah Corey: Yes. We have someone asking about if you could do a prep session at DrupalCon?

Heather James: That’s actually a good question. We will be running certification actually at DrupalCon, but I might take that suggestion over to my colleagues and see if we’ll have time to do a prep session. We are in the middle of organizing a Drupal certification workshop that’s probably a little too early to talk about it now. It’s interesting because we want to make sure that you can be prepared if you are somebody who is experienced, and you want to know what to expect and maybe fill any knowledge gaps that you have. So, we’ll have more information about that in May.

Hannah Corey: Awesome. We had a little feedback as well. Just asking for some additional sample questions and maybe this is something we can take into our blog post or the e-book might solve this. Heather, do you have any suggestions for them?

Heather James: Yes, both hands I think that isn’t the first time someone does - some more sample questions. We kept all the good ones for the exams. We are [Laughter] - we will be able to share as we develop for further examinations, we’ll be able to share more sample questions that will give you a good idea of what they’re like. We’ve chosen this one because its representative of the type of question that’s asked. Though you know just where things laid out, it was one that was extra you could say.

Hannah Corey: All right. I think that’s it for questions. Thanks everyone for attending, and thank you Prasad and Heather for the wonderful presentation. You guys want to add with anything else?

Heather James: No. Absolutely I’m really just – like I said, I’m really excited that this is finally available. I hope people find it very useful, hope that it opens doors for them.

Prasad Shirgaonkar: Absolutely. About preparation actually, if you had been working on Drupal for six months or more actually, just reviewing your own work and studying it or making it more comprehensive in the light of resources that we share, it’s certainly going to make you prepare for the exam. So, just go for it.

Hannah Corey: Great. Thanks. We’ll send out the slides and recording within the next 24 hours. Have a great afternoon, everyone.

- End of Recording -

Training: Drupal 7 Search Configuration Preview [April 16, 2014]

Click to see video transcript


Heather James: This is the Drupal 7 Search Configuration Preview Webinar. This is a preview of our search online course. I’m also going to walk you through some demos and some exercises so you’ll learn about what the course is like and you can actually learn a little bit about search in Drupal 7.

My name is Heather James and you can find me @LearningDrupal on Twitter. I’m the manager of Learning Services.

This webinar is for people who obviously want to know more about Apache Solr Search Integration in Drupal 7 and if you’re curious about Acquia’s Search Service and how it works and how you can get the most of out of it, and of course if you’re curious about Acquia’s training program.

Learning online is a new service that we’re offering and this gives us some self-paced options that we can offer to our various clients. It’s a little bit different from our classroom training. I still really love classroom training. We have a very busy calendar of events. So, please do check that out, but even still, for certain topics, it’s very hard to get a big class full of people together. Of course, something like a search or something like project management, and some of the other courses you’ll see coming online soon it’s difficult to get say 20 people or 10 people in a classroom for a topic like that. Whereas, we can get that online very easily and offer that to more people. Of course, you want to increase access to training so it’s not possible for our partners to make it to all corners of the globe. So, hopefully we can increase the reach that way for Drupal training as well. I’d still – like I said I really believe and love classroom-based training. If you have access to it it’s a lot of fun. We do more than just sit at the computers all day. There’s a lot of group interaction and ways that you sort of deal with all this new information in different ways. So, please – I’ve actually just written a blog so you can check that out if you’re more curious.

Our online training program is a little bit different. You can go to our training site and see some of our new Acquia product courses that are available. Then you can look at the catalogue and you can purchase the courses there. Most of our courses right now are just product specific.

We do have partners that I really love their services like Drupalize.Me. They have a video instruction which I love to use and work through but we find that some people also want alternatives. Our video instruction also includes the text details of what’s happening. We have some other content as well. There is, for example, in the search course, an interview with Nick Veenhof who is the maintainer of the Apache Solr Search Module and all of the activities are written out step by step. The videos are shorter than they would be. So, we don’t video everything, we actually just video say an introduction and then you follow through the steps and you can kind of mark off where you are.

We also have challenge exercises so that the material lets you sort of deal with things at your level. If you found something you’re able to get through more quickly you can give yourself a challenge exercise and get a little bit more out of it, but we try to streamline the course to show you what’s the most important thing you need to do, we know people’s time is very precious. We also have some fun quizzes that are in there, mainly just to sort of test your comprehension and give you a sense of progress, to have a feeling that and understanding of what you’ve actually learned.

Before we look at the course I wanted to take a second and think about search because I want to sort of bring to mind why you probably want to take this course. You’re probably already going through some – having some experience of having a site with a lot of content and people need access to that content or they want to get more out of it.

So, some research that KISSmetrics offer is a result of a survey that they did about people’s perception of their own behavior. People say they prefer to drill down. They like to see their options and keep their options open. You may notice this even yourself you might like to start - if you don’t know much about an area, you might like to start with a very broad topic and see the options available, and click to filter out those results. Even the filters start to give you some information about the content. So, some examples might come to mind if you think of shopping and you may know that you want to get a sweater but you’re not sure if you want it to be a cardigan or a pull over or you don’t know what color, and you don’t know the length. You like to see a variety of options.

Once you know what you want, it gets a little bit easier to make a very specific search but initially you might like to be very broad and the same probably goes for cars or for maybe a law document or something very specific that you’re looking for. So, what we can say is that users love facets. That’s something everybody starts to expect or has started to expect.

There’s another good article here on Intercom’s blog and it’s about Seven Things I Wish Every Search Box Did. So, I’d recommend reading that article. There’s a link you’ll be able to follow when you download the slides. This article is talking about some of the best search pages out there. It’s even funny to see something like auto-complete topped the list here, because Google only recently introduced that feature, maybe two years ago. Now, we’ve come to expect it and we don’t just want to see it on Google, we want to see it in all of our websites, as well as searching across multiple fields. It’s something that seems so obvious. Of course as a user you don’t really care if content is in the body field or maybe an attribute field of some content type, or even if it’s in an attachment. You just want access to that content. So, people just expect this.

People also expect that the results are ranked in some meaningful way and as well you can see some of these options here as well from number five people expect meaningful filters. We’re going to talk about filters in a little – next but what I wanted to say is that people expect that the filters relate to the content and the ranking relates to how they perceive the content.

So, in the example of ranking results it may be very important that more users are commenting on certain contents. You may want that to be more important. Maybe that’s what’s most important. Even if it’s something that’s two years old if there’s more user activity it may have more importance in your realm. Whereas, you may have very time sensitive information and you want some of the content that’s been published more recently to come up to the top. So, people just expect that to work and when it doesn’t and it’s unexpected it’s a very poor search experience.

As well, people expect typo correction. The last point says, “Mobile first,” right? People are typing away with their thumbs. They’ve got a baby in one hand or a drink in another, and a train ticket in another, and they just want the search to be a little forgiving.

The Nielson Group also offers some data about search dead ends. People want to make sure that – I mean, if they’re not sure what to look for they want to be offered alternatives and suggestions. They don’t want to be mocked like with silly pictures of like, “Oops, there’s nothing here.” That’s going to be a frustrating experience and the humor is not probably helping. So, the whole search experience should be very smooth even to the point where search just happens automatically. Maybe you’re looking at an article and you start to see more like this, “Oh, you’re interested in this content? You might want to see that.” So, the search experience is really built in throughout site and it’s something just almost automatic.

So, let’s look now at what Apache Solr can do. Now, this is really a preview of the modules that we’ll actually use in the course and what solutions they provide. Apache Solr has intelligent options as we spoke about. So, Apache Solr Auto Complete will provide suggestions and spelling corrections, and even tell you the number of the results per query. It’s something quite amazing. I probably will say this again as we do this presentation but the complexity here is masked because we will literally be able to install and enable a module and it just works out of the box. The Apache Solr has a lot of sister modules you can enable – or sorry, download and enable to extend what Apache Solr does because the index itself is very powerful.

Another option we’ll look at is files and attachments. Like I said end users don’t really care where related information is whether it’s in that attachment or a body field. Later on of course you can offer them filters when they have a better idea of what’s available but this just gives them access to all of your content. So many organizations have a lot of very important data and really great content that’s locked away in documents and PDFs. If they’re especially moving over from other systems into Drupal, something like this is going to reveal all that great content and value that people want.

Of course, sorting and filtering. So, like we said, users like to start broadly looking for some content and then drill down after seeing what options are available. So, the filters themselves will start to provide people information about the content you have. For example, these facets here might show exactly how much content is related to a specific country and what is the greatest – maybe the greatest population in this case is going to be city content, what’s the city with the greatest population on your site or the least population. These are available to us through using Apache Solr Sort and the Facet API.

The Facet API is sort of a hub and spoke model like some of our other sort of ecosystem modules in Drupal. It will actually let you choose how you want to display. So, we’ve got here a list with check boxes. You can have multi-faceted search or this slider. It depends on how you want to display the data and Apache Solr will be able to understand and make that more useful to you. As well, we want to provide those improved results and boosting.

In the course, we’d look at core search boosting which you can – there are options definitely with the basic core search. There’s far more options available with Apache Solr. You can even extend that with this Apache Solr Term Proximity. It literally looks at the distance between two or more terms. Is it much closer? Then we’ll rank that up in relevance. The fact is with site searches you don’t have the information that large search engines like Google have available to them. Google knows all about the inbound links and it’s got a huge index of the entire web and billions of pages. What you may have on your site is just a product description. You may have very small amounts of content. In that sense, tweaking those biases and making those – sorry, boosting those results can actually have a very important impact on your content. So, a lot of the things we’ll do just come with Apache Solr out of the box with result biasing and field biasing for example, but the Term Proximity is very useful.

As well people expect the results to be easy to read. They want to see the data as it should be displayed. If I just displayed location results as lat and long or latitude and longitude, it wouldn’t be very useful to me because I can’t really remember where’s 52 degrees [laughter]. I’m like, “Huh?” We do expect that data to show up. For example, on a map you want images if the images are in the content you want images to show up as images. So, that’s a really important part of the search experience that we will be looking at.

When we get to the custom code part of the course we can look at making intelligent suggestions. So, if someone does search for a location or maybe they even spell it wrong or maybe there isn’t any content directly there we can see and start to suggest locations that are near to their results and that’s done with a custom code example. All of this amazing technology as we’ll be using it is like I said, “The complexity is masked,” because we’ll be doing everything mainly within the UI with the exemption of this example. A lot of that is all based on the work that is in Apache Solr and I just wanted to go through really quickly and explain what an index is. This is really what makes Apache Solr very fast. Why wouldn’t we just pull from the database? Like we could make - with Views for example we can make a list of all the countries or each of the countries and use contextual filter, and display the results for each of those countries. Or we could use taxonomy terms and we can combine those things together, and we can do joins and bring it various data together. That actually would be very slow and it’s known to be a very slow approach.

Apache Solr actually creates indexes of that content. So, these inverted indexes – if we just take these three example documents over here on the right you can see that maybe these are just like body – let’s say this is like the body field or snippets from the body field of three different notes as an example. So, if you look at the words or where the words occur in each of those phrases like, “Where are you visiting? Are you visiting museums? I enjoy history museums.” You look at the index that results from that analysis or how it’s organized we see the word “where” shows up in the first document in the first position. The word “history” shows up in the third document in the third position. This is what really makes it so much more or much quicker to look up. This is how Apache Solr is doing some analysis and trying to understanding what’s there.

I guess it’s just useful to think about this so you understand that when we start to talk about optimizing those searches that you understand – you’re actually optimizing the index so, you have control over this. We can just look really quickly at how Apache Solr – how the index actually works. We’re using Acquia’s search service so we have some content on our site and we have to send that content to get indexed. As it gets queued and it comes back we can actually see what’s happening in the search index results here. This would happen even if you had Apache Solr installed locally on your machine you would still have to send this information over to your Apache Solr search server.

So, here we have for example every single time the cron runs which is basically a task. It’s basically a list of tasks that the server will run. It will actually, “Queued 200 items,” send them, and process them at once. So, we have over 2,000 items have to get processed so it’s going to take some time and a couple of returns to get that processed. So, you could see what’s happened here is that we’ve – 200 items have been indexed. We have 200 sent but haven’t yet been processed. At this time we can see 14% of that content has actually been sent to the server. So, we’re waiting for this round trip search and we’ve just run cron successfully about three minutes ago. So, what we’ll do here is refresh the index and see what has changed. So, right now we can see those items have come back 400 things have been indexed and we have a bunch remaining.

So, what we’re going to do is actually just choose to index all queued content. This will take some time and you can come back when it’s finish. It’ll take a few minutes. So, if your curiosity is piqued and you want to see how to use some of those features I’d like to show you a quick peek at the actual course. You can see what it’s like.

[Pause] So, this is what it looks like when you log in and you can see that there are instructions and there are various sections on the course. It basically, brings you through all the steps of setting up and installing your site, installing Solr, connecting your site to Acquia hosting. Basically, understanding sort of those - how things work and then you start to configure your search. Then you optimize your search, configure your facets, and then generally improve the user experience.

So, what we’re going to do now is actually look at some of those exercises and those activities. I thought it would be good to give you a bit of a preview of how things work. If I just show you the search features - I’m going to show you the site as it’s finished after we’re – after you’ve developed it within the course. I just want to show you basically what’s available and how things work.

[Pause] So, this is my sample site as it’s installed on Acquia hosting. You can also use the Dev Desktop and so you can work on it locally if you like. If you do it with Acquia hosting it’s fully online. You don’t have to install anything to do the course. So, we can conduct a simple search on the site. Actually before I show you that, let me just show you what comes with the site. You get some sample content because it’s just a little bit easier – we just want you to get started as quickly as possible. So, we have all this content in there and we’ve got some articles, and some cities, and we have for example, content types. We’ve got a custom content type in there. The city content type and this gives you sort of an idea of the type of data that’s available on the site. So, let’s conduct a quick search on the site and see what we get.

You can see that the results are laid out in a meaningful way as we spoke about before in which you learned how to use the Display Suite Module to actually arrange how the search results show up. You can see how the maps are appearing and we’ll look at using a couple of different modules. Let me actually show you what modules we’ll be using in fact.

So, I’m going to go back into the course here and show you the modules that are used. Of course, here are all of the Apache Solr search modules that you’ll be looking at and the display modules like Display Suite and we’ve also compared that to Rich Snippets which kind of makes like a Google looking type search just out of the box. Of course the Facet API and these excellent widgets that we saw like the slider or the check boxes, et cetera, and the location modules. So, we look at location and how we collect that data, and then how we display that data with Gmap.

So, let’s look at these search results here. We can see that they’re listed in order. Somehow they’re ranked. We don’t know yet. We’re going to look at how these are – the biases that are set but you can also see we have as well active still the core search results and you can just compare what those look like. Pretty straightforward with the core search results and you can compare what those advanced search options look like. You’ll notice when we did the search we set the Apache Solr Search as the default.

So, one thing we’re going to do right now is we’re going to make it – well, actually I just want to show you what it looks like with spell correction. If I search for “nurban” we’ll be getting a suggestion, “Did you mean, urban?” You can actually search for those results that way. We can also improve these results.

Now, what I’m going to do is I’m going to show you the Auto Complete Module. The Auto Complete Module will give people instant results. It will also make a suggestion if it maybe thinks it sees a typo and it will say, “Did you mean this?” It will show us – it will be that intelligent search experience like I said people just want now. The facility for this is kind of so easy. We’re just going to go to Modules Listing. I’m going to select autocomplete and enable it.

[Pause] I want to go back and I attempt to do a different search. You could see I was starting to get some suggestions, the word pops up, and we start to see how many times that phrase occurs in the various search results. So, this again completely hides all of the work that has gone into this but for you it’s literally making the choice that you want the feature, installing the module, enabling it and it just – it does what you want it to do.

So, let’s look at something that might be complex and difficult with other systems, Custom Search Pages. So, take for example you may want to specify a preset filter on all of your content. Set a scope for search. You may want to have a search for a specific country. That relates to our content but you may be able to bring to mind some examples from your own site where you know that people just want to search your book of content or they just want to search your product’s content. Or they want to see your articles, something like that - some way that you’re actually filtering on something.

You can even specify a taxonomy term and that’s what we’re going to do in this case. We’re actually going to make a search based on a particular field, taxonomy field. So, in order for us to do that we have to assemble the custom filter that we’re going to create and search for what filters – we’re going to look at what filters are available and then we’re going to show you how to actually assemble this. So, first thing we’re going to look at are the custom filter options available. One of them is the country field because that’s what is on our content type or the tags field that’s for example available in the article’s content type. We can look at the unique term ID as well. So, we’ll actually find out what is the unique term for a specific country. So, I’m going to do a quick demo making that search page, locating the field ID, and writing the custom filter, and creating it.

So, let’s look back on our search page again. We’re going to see that – right now we have a tab with the content tab and the site search tab. The content tab is of course the core search we’re keeping around. Now, we’re going to add our own search page. So, I’m going to call this my Country Specific Page, just for that example. The search environment is Acquia Search and we’ll call this the Ireland Search tab. The Custom Field is what we’ll actually be looking at and let’s fill out the tab. I’d like it to be something like search/Ireland and we’ll select a custom filter. This is sort of where you stop because you need to know what that custom filter is going to be. There’s no way you would know this off the top of your head. I certainly couldn’t remember it.

So, I’m going to go to my Administration List, Reports, and look at my Apache Solr search index. This will actually give you some insight into how Apache Solr is looking at your content and what’s available to actually filter on. The thing we’re looking for here is this country field. This right here, field_country, is actually the name of the field. I’m going to show you the content type just so you can see is actually the name of the field on the city content type that is my country taxonomy term field or term reference, I should say.

So, this is the filter we’re going to use. Now, what’s missing in this case is the ID. The way we find that out is by going back to look – I’m going to go back to structure and look at my taxonomy terms, and the list of terms that are available. There are quite a lot of countries here. It turns out that Ireland’s on the next page. We’ll get the term ID. You can click edit. You can see the term ID or up in your browser you’ll see. It’s 107 in this case. So, that will be the custom filter we’ll be working with. So, I’m going to save that. I would expect now if I click on this link that I’ll get my Ireland search.

So, what’s happening now is that I’ll start to get a limit of filters available. I’m going to search for houses for example in Ireland. Now, instead of getting all of the other countries you can see I’m only getting results within this one country. Although this is amusing it looks like this may be mismarked, maybe the latitude and longitude is wrong here. There you go. These are just some examples. Okay. That is basically how you make a custom search page. You probably have some ideas now that you’ve been watching it and how you might be able to use that in your own examples.

Next, let’s look at optimizing search. Improving bias is probably one of the most important things you’re going to be doing on your site. You know what you have to think about I suppose is how people are searching your content and what’s the most important thing about your content. For example, if you want more recent time sensitive content to show up to the top that’s a bias you’d want to improve. The only way you really can be able to do this is through actually starting to analyze your search logs once you get them so it’s not like build it, set it, and let it go. You probably want to build it, see how people are responding to it and constantly tweaking and improving your search, and taking in customer feedback, and watching their behaviors.

One thing I’ll say and we’ll talk about this when I do the demo is just to be very careful about how you tweak these boost settings. Don’t always put everything to the highest setting because then everything is just flat. What you want to do is really through testing and learning you’ll get an idea of how those results are improved. So, the factors are multiplying the relevance. So, 8.0 would be eight times boosted over the regular value. So, start very low and test as you go.

As we’re playing around you may want to just do something very exaggerated just so you can see your result but it’s not necessary on a live site. So, we’re going to first conduct a test search. We’re going to keep that page open just so you can see the direct change and we’re going to change the bias, and we’ll look at the index again, and see what changes are going to be made.

So, let’s start here under – yes, sorry. We’ll do a search actually that’s what I mean to say and we’ll search for [pause] flowers. We can see these two cities popping up. What we’re going to do is improve the search so that more recent content shows up. So, I’m going to keep this open and one thing I’m going to change is the date of this. [Pause] I’m going to edit that and change this to one year ahead. [Pause] Okay. At this time they’re exactly the same time I suppose so it won’t actually make any difference. We’ll just refresh there. You can see that Glovertown is up top and Ura is just underneath that.

So, let’s improve these search results. [Pause] Go back to configuration, search meta data, Apache Solr search, and under Acquia Search we can work on the bias. Here we’re going to set the result biasing. So, if something is more recently created we’re going to boost it by two. So, we’re going to double it and save it. So, we’re changing the settings and it also means we have to re-index because now one item hasn’t been sent to the server. So, we’ve actually changed the value of that item. So, we’ve changed the date of that item. So, it’s something new in the index and plus we’re changing the settings. So, we’re going to [pause] index the [QH] content which goes off to the server as you know. One thing you can do is actually go over to administration [pause], configuration, and cron, and you can run cron. So, that will take a few minutes and we’ll go back to configuration again. Search and look at the status of the index. So, one item has been sent and not processed. This is going to take a minute. So, when the cron job is complete and it has run around you can see finally zero items remaining and that means that updated content has been searched.

So, let’s go back and look at the results again. It was Glovertown versus Ura. I changed the date and changed the bias. So, we’ll do that same search again for flowers. You can see Ura which is more recent content is now coming up to the top. Actually all of the results now are rearranged based on how recent something was. So, that is just a little peek at bias.

There are so many options so there is the result biasing as we looked at. You can see how you can improve things again by how many comments, maybe more recent comments. Whether something is promoted to the front page and then you can even have specific field biases. So, there’s already some that are set by default. Some things - a header one or heading two in your body text. That’s going to get more boost and seen as more important. As well you can make certain types of content get improved as well. That’s just what Apache Solr is offering us out of the box which is quite brilliant.

So next, we’ll look at facets. Facets are the way that people can filter through their search. We can get a peek at the some of these facets, for example, on the site. [Pause] So, let’s look now at facets. Again, we’re talking about how people search and how people look for content on your site. Like I said, “You’ll have to listen to your users.” There’s a good article here from Smashing Magazine a couple of years ago still very effective and important is about looking at your query logs to define what those facets are going to be. Using what’s already going on in your industry, that’s obvious, right? You want to see what people expect and what’s done already. You want to choose something that’s very important to your users and important to you. So, how are people influenced to find certain content? Maybe you want to encourage certain content or behaviors and to get active in their community or to purchase something. It depends on what you’re working with. So, we can keep that in mind when we look at the city content type you can see there’s some information available. Location data or information about the population, et cetera.

Facet API offers you some options you can see here on the left. For example, you can have a list of links. You can have links with check boxes, and get that multi-faceted search. Or you can add additional modules like the Facet API Tag Cloud or the Facet API slider which will let you give people some options based on the kind of data they have. So, if it’s more important or more – if a term is showing up more in the Tag Cloud, it gets bigger. With Facet sliders it bases it on, for example, numerical information.

You can also do things to improve the user experience. As we’ll see, you can decide where you want those Facet blocks to appear. You can simply rearrange them in your layout. So, in our case we’ll put the Facet API slider up across the top so we have a nice long slider to use and you can put things in the sidebar for example. So, this is what we’ll be doing.

In the course you’ll actually set these in an exercise and then you’re given other challenge exercises to explore some of the other ones. This is again an example of we’re going to teach you something that is most expedient and quick, and efficient for you to learn. Then we’re going to give you a bit more if you have some more time. If you want to dig in a little bit deeper, we’ll give you some advice and some hints about where to go next.

I’m going to show you that really quick. Under Structure, Blocks. This is again with all the modules that need to be enabled and downloaded as we looked at in some of the course material. That’s assuming that you’ve simply installed and enabled the modules and they become available in this disabled list here.

So, I’m going to take the population slider and put that into the content list up here and make sure it’s at the top of the content list, and save it, and go back to our search page and refresh and see what changes we’ve made. Again, this is on the same search and you can see the sliders available, and I can limit to cities of a specific size or population like that. Again, this is something that just works out of the box. There are just so many different options and once you start getting familiar with it you start to master it.

The great thing is that because all this technical complexity is sort of pushed into the background you can focus on the stuff that’s important for your site, and the user experience, and how that search experience works. You don’t have to spend time writing custom code and doing complicated things. It basically is this easy.

So, what’s next? I’d recommend if you want to check out a webinar that my colleague did in August, you can watch to get some tips on how to configure Solr search for your site. Of course, you can take this course online. You can check out our Acquia Product Courses on our site and go through these step by step in much more detail. So, if you are new to Drupal and you’ve watched this webinar, you probably zoomed through a lot of things very quickly, you probably have a lot of questions. That’s basically what the course is all about. It’s taking you through these things. Self paced in a way that you can go at your own pace but hopefully in enough detail to get a lot out of it.

Thank you. I hope to see you online.

Drupal Step-by-Step: How We Built Our Training Site, Part 2 [April 9, 2014]

Click to see video transcript


Hannah: Today’s webinar is Drupal Step-by-Step, How We Build Our Training Site Part 2 – last week we had Part 1 and this is the second of the series – with speaker Dave Myburgh, who’s a Senior Engineer here at Acquia, and we also have Heather James on the line who’s the Manager of Learning Services here at Acquia.

David Myburgh: So today is Part 2. Last week we just spoke about how we built our training sites, some of the backend stuff that we did. Today, I’m going to talk about the frontend, theming and how we used Bootstrap to make it look all pretty. I’m a Senior Engineer in Acquia. I’ve been there for two-and-a-half years or so. I’m the lead developer on Acquia.com and a couple of other small sites, including the training site, obviously.

So what are we going to look at today? We’re going to see what is this thing called “Twitter Bootstrap” or just “Bootstrap”? We’re going to look at some of the modules that we used for helping us to style things on the frontend a little bit better, make things look nice; and look a bit more in-depth at how Bootstrap and Views can work together. We’ll look at the grid system that Bootstrap uses and we’ll look also at working with responsive layouts. Finally, we’ll look at some of the components that Bootstrap offers us.

So themers and site builders will benefit the most from this, I guess. If you have some experience in Drupal, well, it’s useful. If you're new to Drupal, you're definitely still going to pick up some new and fun things.

So this is what we started with. This is our old training site in Drupal 6, kind of old-looking. It’s not very modern look and difficult to work with and tweak stuff and modify things. So we ended up with this, much easier to work with for managers, keeps Heather happy, keeps me happy because it’s less coaching stuff that I have to do as well.

So to get the new design, what do we need? We want to just obviously update the old one, make it look more modern. Get a more consistent look across the site. Obviously, make sure it’s cross-browser. And most importantly, any new stuff that the training folks decided what to put on the site to make it easier for them to add new things, but still keep a consistent look and not have me do constant code pushes all the time to update stuff within. From my point of view, I would like to use SASS and Compass for the backend development work. It just makes working with the CSS and the styling side of things a lot easier and simpler for me. It’s something that I’ve been using and improved relatively, short period of time in the last year or two, but definitely it’s very useful stuff and very helpful.

So just a quick look at some of the benefits you can get from using the new system. This is one of our old pages and old aesthetic lining page. We’ve got a bunch of blocks on the right-hand side and those are physical Drupal blocks. So if you want to add a new block there, you’ve got to go add it on the “Add one block” page, edit it, position it correctly, all that kind of stuff.

On the new site, we basically converted that page into a single page with no actual blocks. Everything you see in front of you is all part and parcel of the node itself and it’s simply styled using classes that are provided to us pretty much by CSS. Obviously, you would need the full HTML text format. So it is one thing to consider when you're allowing other people, you may not be privileged to use this to add content to your site.

So what is this thing called “Twitter Bootstrap”? When I first read about it, I was like, “Okay.” People were talking about it all the time. It was kind of an abstract thing to me, but once I’ve been using it, I figured out it basically is a theme. That’s what you’ve – you’ve got to think of it as – you can look at getbootstrap.com for this is where all the information is stored, and it can be used on anything. This Bootstrap itself is not Drupal-specific. It can be used in any project. If you're writing straight HTML, you can just use it straight off. No problem. It was made by Twitter, hence the name “Twitter Bootstrap.” They use it internally, and I mentioned they released it as open source for the rest of the world to enjoy.

Some of its features, well, Bootstrap 3 now is mobile-first and also responsive. It’s cross-browser compatible and works well with IE8 and up. Nobody should be working with IE6 and IE7 anymore, we heard. Bootstrap 3 has a SASS and a LESS version. If you're using preprocessors, you don’t have to use those. You can just use a precompiled code for CSS as well. It comes with lots of very useful CSS and JS – JavaScript - components. It also has excellent documentation and a very big community. A lot of people have been using this framework as a theme. So there’s a lot of information out there on other sites that you can find useful tips and information. Just as a quick overview or a quick look at one little thing that they give you, a simple unordered list, if you just add two classes to the UL name and you have polls you automatically get inline navigation with the most run, a bucket on the active class as this is simply adding a class to existing HTML. So it really makes life for the themer a lot easier.

So how do we get Bootstrap into Drupal? So this wonderful chap Artoym who is here today, created a module or a theme – a base theme for us and we just enabled it on your sites and you are then able to use Bootstrap 3 in one of your sites. You do need to make a sub-theme, and we’ll talk about that in a little bit. There’s also a bunch of companion modules - or modules rather that work with Bootstrap in Drupal that can enhance its functionality, make it easier to use some of the Bootstrap components on your site as well.

So Drupal theme - it requires 1.7. Drupal core is Drupal 7 core. At the moment, I believe, is 1.4. So you do need to install the jQuery update module, or if you want to do it manually, which I don’t recommend, you can install jQuery 1.7 yourself. The problem recently was that Views UI used to break with 1.7. That has been fixed with more recent C tools updates. So that’s working fine now. But if you switched your jQuery to 1.8 or higher, Views UI will again break. So we usually use 1.7 as your jQuery option. JQuery update module allows you to choose different jQuery Views. I believe in version 2.5, which is not out yet, which is the next version, they will have a fix with this in that you can choose what jQuery version to use on your admin site. So your frontend could be 1.8, 1.9. 1.10, but then you just leave the default Drupal jQuery 01.5, whichever version you want as your admin, and that’s the way of Views you want to get. So hopefully, that’ll come out with 2.5. So your CSS preprocessor, the sub-theme of the Bootstrap Drupal theme currently uses LESS by default. I’m not familiar with LESS myself. I learned SASS, so I modified the sub-theme so that it uses SASS.

So what is SASS? LESS is also to kind of explain by this. They’re preprocessors, so you can write fancy CSS and have them compiled into regular CSS. SASS stands for Syntactically Awesome Style Sheets. You don’t want to say that too often too fast. It’s basically CSS with super powers is the way they like to think of themselves. It gives you extra functionality when you're writing CSS and your file is not called “.CSS” anymore; it’s called “.SCSS” or “SASS ECSS.” So one of the bigger things that I find for myself is variables. So like you're writing PHP, you can have a variable and you can assign it something, then you can reuse it later in your code. So the way it works with SASS is - the most obvious example that I can think of is, say, you have your theme based in color, so for us on Acquia, we have this nice blue color, and we can create a variable and we can say “Acquia dollar Acquia blue equals” and our hex code for that color. Then throughout out our SASS file, we’ll use dollar Acquia blue instead of the actual hex code. So then six months down the line, we have all our CSS working nicely. Six months down the line, marketing comes in and say, “Okay, we don’t want this blue anymore. We’re changing our colors to green,” or something. All you have to do is go back to your SASS file, change that one place where you set your variable to the blue hex code. You now set it to the green hex code, recompile your CSS, and everything changes to green, and marketing is happy. And you're happy because you only have to change one line of code. Another useful feature is nested rules. So a nested rule is basically when you have – a good example would be if you're trying to style a linked and an unordered list. You can have the rule on the UL. You can have the rule on the LI, and you can have a style, a rule on the A elements. So a normal CSS when you write it, you want to style your UL, you’d have UL open braces and your style. You’d have another line for ULLI open braces your style, and you’d have a third rule for ULLI A and whatever style you want on that. So it’s three lines; three separate sort of declarations. In SASS, what you can do is you can write just the UL open curly braces your style, and then before you close the braces, you indent, you type in LI, open the curly braces, write the style for that one, and then within that – within those braces, you put the “A,” also indent it. So you get this nice indented look. It makes it a lot easier to read and a lot easier to manage later on. So it’s just those kind of things that understands that, and then when it outputs your CSS in the end, it’ll limit actually automatically output those three individual styles that you’re used to seeing in regular CSS. The other thing that SASS brings to the table is mixins. It took me a while to figure out and understand what mixins were, but basically they’re just functions or scripts, if you want to think of it that way. So for example, if you want to do the rounded backends that you saw on that poll button, that is just a border radius declaration in CSS. But if you're – you may know that each browser has its own prefixer browser prefixed on the border radius. Let’s say, you can have moz-border-radius or webkit-border-radius; so it’s depending on the batch type of things out all the time. You need for – to have one border radius, you need to write four lines of codes. So basically a mixin would be you would have a function, you’d say, at the fourth – or add include border radius and then the number of your border radius and pixels, and then you would just mix them, that would then output the four lines of code that you need for each browser and the final border radius; very useful, very powerful. You can do some crazy stuff with that as one of our frontend guys does some pretty astounding things with this. So SASS needs to be installed locally on your machine where you're developing, let’s say, Ruby gem, just a little module for Ruby, and that gives you access to be able to use SASS and try to understand those kind of things for compilation later on. And it is compiled into a regular CSS file. So from a .SCSS file and with all the kind of codes stuff that you have in there, you’re basically just going to output a regular CSS file. You don’t have to do anything. You just run the compiler and it does it for you.

So let’s have a look at how we set up our sub-theme. So when you come with the base theme, you don’t really want to modify the base theme, because if you need to update it later on, then you're just going to wipe out all the changes you did or you're going to have difficulty implementing your changes back in the theme again. So Bootstrap Drupal theme gives you the option of creating a sub-theme. The default tutorial comes with LESS, which is fine. If you want to use LESS, follow the tutorial. No problem. So the basic concept is you need to download Bootstrap files and in your sub-theme, you create a Bootstrap folder. You add in the JavaScript – you have a folder for JavaScript, a folder for fonts, and a folder for CSS as well. Now, the JavaScript can be – well, let me start from the beginning where there’s the JavaScript thing. Bootstrap offers you six to eight different JavaScript to do functions or components, and you can include one or any of them in your sub-theme, or you can include them all in one already minified, compiled JS file, which is only 29 KB. On our site, we just use the full JS file, because we’re not sure like maybe later on, Heather’s going to decide she wants some new Avanti functionality. If she wanted that and it wasn’t already in there, I’d have to go push some codes to make it happen. So just install the whole thing. It’s only 29 KB. It’s not a huge deal. The fonts are the icon fonts that come with Bootstrap and the CSS file is just one big CSS file for all the Bootstrap CSS – all the styles that you already have available as the components.

So to make it SASS-friendly, we have to import. We use @import bootstrap in our main SCSS file that gives us all the mixins and those kind of things from Bootstrap. If you're going to be using Compass to do the compiling for you, you're going to have those config.rb; it’s a Ruby config file. You need to require Bootstrap SASS in that file as well. If you don’t understand this, don’t worry about it. When you start developing with SASS, you can come back, look at these slides, and you’ll get the hang of it. Each of the Bootstrap JS files, either the full JS file or each one needs to be added to your .info file, so they’d get loaded. The icon fonts are loaded using @font-face in your SCSS files. You can pick one, whichever one you want to use.

So this is kind of the layout that we have for our sub-theme. So we have the Bootstrap folder with the fonts, JS, and CSS folders. We have a separate CSS folder where our compiled CSS ends up into a single file. We have a SASS folder and in the LESS version of this sub-theme SASS, which is your replacement list, we have a folder called “Components,” and in there we create separate SCSS files for whatever kind of setup you want. So for us, we created a separate SCSS file for each sort of content type. So we have one for events, one for courses, one for general stuff, one for the home page, things like that. We will also have a styles.scss file in it and all that file does is import each component, and each component file in the components folder has an underscore in front of it that allows it to be imported only and not used in creating a new separate CSS file for each of those components. All those get compiled into styles SCSS, and then that gets compiled into styles.CSS later on. We have a templates folder for all our template overrides; node TPLs, page TPLs, those kind of things. We have a theme folder for some includes; preprocess include, theme include. We have our regular info file, our Ruby config file, and then also template.php, favicon, logo, screenshot; so those kind of things. So that’s what our sub-theme looks like and it’s more or less the recommended layout. Depending on how you work, you may want to change it a little bit.

So some of the modules we used, just to make things look better on the frontend, not everybody’s Bootstrap-related here. This is just general modules for doing stuff. Field Group - great little module, can be used to group fields on your node form as well as on the node display. Most useful thing in field group for node display is it provides you some elements that are HTML5 elements. So you could add like an aside or section element. Another module, Field Formatter Class, very useful, especially if you want to add specific classes to fields for output, and when you're using Bootstrap, it’s kind of useful to be able to do that, because then you can make your fields automatically have whatever styling you need just by adding that single clause without you having to override fields in the template file or something. Block Class does the same thing. It allows you to add a specific class to a block so it’s customizable. Font Awesome was something we used just to throw in a couple of icons here and there. It’s just – naturally, it’s another icon font and you just add a class to whatever thing you want and you get a nice icon on that. DraggableViews is more an admin useful module. It allows Heather to reorder the courses as she needs them reordered, whether it – most likely it’s not going to be alphabetical, so the view that outputs the thing is not going to be – you can’t just sort on random sorts. It will allow her to play around with that. We use Gmap for our main event page map and on each event node, the maps. Finally, we have Views Bootstrap, which is Bootstrap-specific, obviously, and allows – it gives you new view styles, then output your view in a Bootstrap friendly way using Bootstrap structure and classes.

So just a quick look at Field Formatter Class and Block Class. I’ll talk more about Views Bootstrap in a little bit. So Field Formatter Class on your managed display tab for your content type, you're going to see down at the bottom where it says “Class: pull-right, margin-let, margin-bottom.” Those are classes that we have in our theme and you can just assign to the actual field. For Block Class, when you configure the block, you’ll see another input field there, CSS classes, and you can add whatever classes you need in there. The col-md-6 is a grid class from Bootstrap, and Bootstrap is a 12-column grid, so by using the number six, we are saying this block is off the width of the page. I’ll talk more about the grid in a little bit as well.

So let me just show you live what those things are. So this is our display for events, and you can see your class here. So when you click on figure for the field, you simply just get a single input field and you can put your classes in, in a line separated by spaces. Then that works the same way for blocks. So here’s our nice map. So we’re just looking at what Gmap can output. Each of these little markers is a node and we use the location module to geo-locate an address, and then Gmap reads in the latitude and longitude of each little marker on the page for you; and each of our nodes has the same thing; it has a little map. Gmap is really useful. You can change the style depending on – you can output the size and all that kind of stuff.

So just a quick look at some of those things we do with those frontend things. Let’s go back in here. So some other Bootstrap modules that exist out there, we didn’t use them. Bootstrap Field Group, it allows you to do navigation, and navigation’s kind of set up on the frontend. It creates – the way you need it set up is you need to have a bootstrap field group, which has a class of nav or you choose - it’s a field type, a navigation group icon – item, and then you would have a second field group inside that for each navigation item, and within each of those field groups, you can have your fields. So it kind of duplicates what the Quick Tabs module does and then you can just click each tab and you would then see the content for the fields that were underneath each of those tabs; very useful. We didn’t use it on this particular site. I have used it on other sites; it’s quite nice. Display Suite if you like to use display suite for doing your frontend display. There’s a module that provides you Bootstrap compatible layouts using the Bootstrap grid. Also very useful; I have used it on other projects. There’s, of course, Bootstrap layouts, styles, and tabs for panels module. That’s pretty much the major sort of ones that you're going to be looking at. There’s a bunch more and as usual, searching for stuff on drupal.org is always – always it’s something interesting that’s going to come up.

So let’s look a little bit more in detail at Bootstrap and Views, seeing as most people are going to be using Views on your sites. On this page, this is a track node and each track has a bunch of courses associated with that particular track. So we’re showing - on the right-hand side of the track node, we show an accordion display and that is using the Views Bootstrap module. So you just click on the title and it’ll collapse it and open it as you go along.

So at the moment, we’re using the 3.x-dev version of the Views Bootstrap module. There was some issue with the current stable release. It didn’t work particularly well with the new Bootstrap 3 as far as I recall. There is a newer dev release out and as soon as there’s a proper release past January 31, 2014, it’ll be fine to use that stable release. So what does Views Bootstrap give you? It gives you a bunch of new styles that will basically be Bootstrap components. So Accordion which - just the open and closing of information. The Carousel slide show, kind of what Views slide show does. The Grid, same as the regular Views grid, except it uses Bootstrap classes. Media Object, it’s not video or audio. It’s actually a blog display. So if you have a small icon on the left, then your text for the blog teaser on the right - so a blog listing page or Twitter tweets listing page, that kind of thing. It has special formatting using Bootstrap classes for that. You can now put tabs, tables as well. Bootstrap has a bunch of different designs for tables and it also can do thumbnail layout. These are all Bootstrap-specific layouts. So if you're looking at a View, under format you will see these options listed. Choose the one you need. You can always check on Bootstrap documentation and see what is actually going to output. We’ll go through these in a little bit as well.

So let me just show you the track page. So here’s our track page of content management, and these are the courses - two of the courses in that particular track. So this is what an accordion is. You just open and close this button that’s basically using this one, this view which is Bootstrap accordion. It doesn’t have a lot of settings. The only setting it really has is what’s in the title field, and the title field is whatever is displayed here is the thing that you're going to click on to open and close your accordion. The one thing to note is that title field, make sure you're excluding it from the display. If you don’t, what’s going to happen is when you open this thing, you're going to see the title listed again right here. So you’ll probably know how much you want. What else? So the View – okay. Home page, this is our carousel or Bootstrap provides you. You can see here when you move to the right, you can scroll left or right, and that’s all straight Bootstrap. In fact, this particular carousel on our home page, we did it manually. So it’s actually embedded inside the node rather than using a view. We didn’t want to create a new content type just for a couple of slides. It’s not something that we’re going to be changing that much. All right. So that’s the other advantage is you don’t necessarily have to use Views or anything. You can manually type in all the code that you need and relatively easy to do as well. Okay.

So let’s look at the grids and a bit more about the responsive stuff. Bootstrap grid is a 12-column grid and it provides you with a couple of extra options that I’ve not seen before in other grid systems. On Acquia.com, we actually use Omega 3 and the only thing it has is a grid class with a number. So it’s basically grid 5, we’ll use a five-column display for whatever element, but Bootstrap gives you a few more options where you can specify at what breakpoints you want the element to use that amount of columns or when you want the element to actually be the full width or horizontal field types. So it’s a little confusing at first, but basically if you looked at, for example, col-md, which is for medium devices, we have an example on outside where we have col-md3. So by using three, it’s a quarter of 12, so that means you're going to get four blocks across the page. That’s using a quarter of the page and we actually have a display, we’re going to have four blocks. Then we move down below 992 pixels, it actually drops it down to two, and then obviously on the front, it will become one. So you really – for this kind of getting the grid options correctly sorted out, play around with them a little bit just to see exactly what they’re going to do. It took a little while for me to understand how this concept works, but very handy that you can actually specify the different breakpoints of when things are going to happen. You don’t have to do any coding for this. It’s all done for you by Bootstrap.

Some of the other responsive elements that Bootstrap gives you, responsive tables, very useful. Most tables, when you look at them without doing anything on the font, they kind of stick out to the right, break your display a little bit. Bootstrap gives you a table responsive class that you add to a third wrapper around your table, and essentially what it does is it makes your table scroll within the width of the font. So it doesn’t stick out anymore. You're just able to scroll left and right. It’s quite a nice option. I kind of liked that. A couple of other people have solved responsive tables in other ways. Some people collapse them down into lists. Other divs manages to keep the table in a table look, which I think is probably – for me, I find that the nicest solution. All right. And a bunch of other responsive helper classes. So if you want certain things to appear on bigger screens, but not on the font you get these classes for hidden or visible, and depending on what way you want things to show up or be hidden, you just choose the right class, and then Bootstrap handles the rest; very useful. We use this kind of stuff on Acquia.com. We actually do some stuff, but we had to write our own class, it seems, on Bootstrap. Yes, very useful. The other thing Bootstrap gives you is an image responsive class, which you just add directly onto the image tag, and that will make the image then responsive and resize down when you shrink your screen. Quite often, people will just basically blanket all image tags, all image elements with this kind of class in their own CSS. Their work generally may not use image responsive, but if you want specific image – if you're not doing that and you want specific images to be responsive, this is the class to use.

So a couple of other components that are available – there’s a lot of them. I’m going to go through a few. So some of the CSS stuff, just a bunch of classes that you can add on things. There’s this cool thing called “.lead.” It makes your font a little bit bigger. So it’s like an introduction for the text. Bootstrap does some cool stuff with lists. You can have inline classes to make the thing automatically inline. There’s some stuff for code formatting, headers, those kind of things. Forms are really nicely handled. You have a nice inline option, so that you can get input fields together on the same line. Quite often you want to do that with like first name, last name, those kind of things. Bootstrap makes all that kind of stuff easier to read. It’s really useful for keeping your forms standardized across various browsers. Buttons, super cool stuff, we use a fair but you have options for different colors and you can override those colors in variables in your SASS files. There’s different option - different classes with different sizes of buttons, different states of buttons; so like if it’s active or that kind of stuff. You can also group buttons together, so that if you have three or four buttons grouped together, you just get a vertical divider between the buttons and only the first and last one get the rounded corner. So it looks like a nice button bar. I’m going to demo – oh, I’ll show you what these things look like in a minute. Glyphicons, obviously, is your icon font. Jumbotron is a big announcement kind of block. It’s a particular format of HTML that you need for this to work, along with the class; very nice on the front page if you want to have product announcement, those kind of things. It has panels of the Drupal module, just – it’s like a highlighted header with some text load wrapped with a nice border. We use some of those on our sites as well.

So let’s have a look – so I’m just going to quickly show you panels. This is what I mean by panels. These four blocks are a panel – each of them is a panel, and these are the ones that I was talking about that have the grid class where they use a three-column – we’ll be using up three columns each. So when you shrink down your screen, texts get a little bit narrower as you go down. But when you get down below 991 pixels, it becomes a two-column option. Then eventually when you get down to mobile, it becomes full width.

Let’s have a look at some of the other CSS components. So typography, go over the headings. So it makes the font less big. Tables - you have different options for tables. You can just have plain tables of the vertical lines. You can have striped, bordered. Hover means when you move the mouse over, it gives you a highlight for the entire row, kind of nice if your tables are kind of big and you want to be able to see stuff easily. Forms, very useful, very standardized. This looks really pretty. Buttons, these are the different – the main nav and it’s just a different class depending on what you want to show. Sizes. And then states – so active state, you can – just by adding the class, it changes the format for you. A bunch of helper classes, so you can have backgrounds, those kind of things. All right. There’s a lot of information here. Whenever I’m working with the Bootstrap theme, I pretty much have this page open all the time, just to look at stuff, see what classes I can find, what classes I’m going to use, because usually quite often I’m finding new things like, “Oh, that’s an interesting way of doing something,” or I can also search, Google it, and other people have come up with some pretty interesting ideas about how Bootstrap altogether. So that’s basically the main CSS stuff.

So let’s have a look at some of the JavaScript things that they offer. You’ve already seen the accordion and the carousel. They have the modals option, so that you can pull out content that’s already on your page in a modal. So you click over button, maybe you hit in that content before. You click a button and pops it up nicely for you. It can also pull in the remote URL. It has tooltips which is essentially the same as when you hover over an element that has a title attribute and a choice it takes as in title. Tooltips does a similar thing. It’s a bit more customized. It looks a little nicer. It’s also fast. I find that the regular default tooltips, you’ve got to hover for like a second or two, and then it pops up. The Bootstrap tooltips pop up instantly, which is really nice. Popovers are basically like a callout. You click a button and the little thing pops out the side with a bit more information on what you want, on whatever you’ve clicked on; very useful if you're into those kind of things. Affix is the other one and that gives you like a sticky sidebar nav. I’ll show you those now.

Let’s look at the components. Oh! Yes, this is the button groups thing. Let me show you. So these are three separate buttons, and then when they’re grouped together, it makes it look like a nice button bar. Okay. So some of the JavaScript stuff, so modals, you have a little animations in these buttons. You click it. You get a nice modal. You can have buttons in the modal. You can do all sorts of cool stuff in there. You can see there’s a bunch of other ones: dropdown, tab, all those things. Tooltips, let me show you – where is it? Yes, so like on our event page, your service sticky sidebar, but each of these icons has a tooltip. It’s this little black or dark gray popup. It explains what the icon is. This button has one as well. This gives you a bit more information; very nice, very simple to do as well. Popovers – okay. So that wasn’t very clear on the way I explained it. This is what it looks like. Basically, it’s open and close on click, rather than a hover, gives you a nice formatted title and a bit of some text here. Then affix is a sticky sidebar which I’ve used it. You can see this manual on the right here, it doesn’t change position at all. Affix has a whole bunch of different options and I haven’t used it myself. Our actual sticky sidebar is done differently, but that’s – it’s got some fairly interesting options. So that’s pretty much how - a look at Bootstrap and how we used it. Our entire site is responsive obviously, we try to use the classes as much as possible. That avoids any inline styling. We have no inline styling on this site – on the training site. Heather can then – as I’ve mentioned, she can come in, add some stuff. She did – I can show you the private page again. That’s the old one and the new one. All of this is basically within the node itself and she made this all just by looking at the various classes and seeing what they can do. So it’s a bunch of panels with grid classes. Let me show you here. Let’s see, it’s a little bit slow to look at it. So we’ve got a col-sn-6. So it’ll - and you can collapse down on small on the font. You’ve got your panel headings, panel title; and you do have to follow some HTML structure to get these things to work correctly, but I think it’s a pretty small price to pay to have the nice functionality that Bootstrap offers us. And it really does make my life a lot easier. I haven’t done any CSS pushes since we launched, and Heather’s been able to manage the site all by herself. No problems. So that’s pretty much it. If there’s any questions, I’ll be happy to take them. Thanks for listening.

Heather James: Thank you so much. I’ve sensed other people are probably thinking of questions, Dave. [Laughter] I know I’d add some. I thought it was interesting that after I did a little blog post about this live tutorial you’d be doing, that we had a little controversy internally, and I thought it’d be interesting to talk about that because people may be wondering when it’s appropriate to apply this and when it’s not. [Laughter] So just to give people some context, one of our colleagues sort of didn’t – he’s sort of like, “Oh, no. This is a dangerous technique, because it means people will say, ‘Oh, we can just have unfiltered full HTML in all of our body fields and do all of our layout within our body fields.’” The stories from my experience from the old site, I had only a handful of one-off full pages like that private training page, and I would only be using those blocks on that page. So I was actually putting a lot of overhead on the site, having to go create a blog and then control it’s visibility to get it displayed the way I wanted it to look. So it wasn’t really the right use of that tool either. So when I saw this solution, I thought, “Oh, this is going to save me a lot of time.” So Dave, I wonder if you wanted to sort of say what your response was about when this is not an appropriate technique and not an appropriate theme.

David Myburgh: Definitely. So yes, like I did mention, for some of the elements that you want, some of the components that you want to display, you do need to have the ability to answer full HTML. Those H3’s with a bunch of classes, by default, the Drupal filter system that takes formats filtered HTML would just strip all that stuff out in one word. So you do need full HTML and of course, with full HTML allow – users can then also post in stuff like scripts and do all sorts of crazy stuff. So you’ve got to be very careful about who you're allowing to edit, take things/stuff on your site. If it’s only your admin users that are going to be editing stuff, fine. Give them full HTML; that’s okay as long as they know what they’re doing. If it’s open to regular authenticated users, you're probably looking for a bit of trouble there. It’s not recommended. So allowing the general public to use Bootstrap elements for display is probably not a brilliant idea. This is more for the backend, so admin people and possibly trusted editors, those kind of things. Really, what I would like is – sorry. What I would like to see is – I just thought of this today, actually, when this discussion started - is some way that we could allow classes to be added into filtered HTML. I haven’t looked to see if there’s a module. There probably is a module that does that already. But yes, that would be an ideal solution. So if you can add a class without having to add – without the ability to add full HTML, which would include scripts and unpleasant things like that.
Heather James: Yes, definitely. I think that one of the – I sort of had a further conversation with another colleague about this and we discussed the particular client situations we see – unfortunately seen a few times where on the content type, they’d have multiple body fields and they’d have one body field that would allow their site builders to do something like you’ve shown, that they could have multiple columns and unfortunately, using things like table base layouts where they’re migrating old HTML content over, and then they’d add a second body field for their mobile site. So they’d actually be using a mobile redirect and they would have to select and show a different body field that would be mobile friendly. So this solution is quite different, because when I set in those panels, I can also specify not only that it’s – how many, I suppose…
David Myburgh: Columns? Columns, yes.
Heather James: …columns, yes, in the grid. Excuse me. [Laughter] But I can also specify how it should behave when the page gets resized, because it is responsive out of the box. So it’s quite different from even what some of our problematic client situations are. So I hope with that, people got their curiosity piqued to try this out. I wonder if there are any questions, Hannah, from the audience?
Hannah: Yes, the first question is “Where can I find documentation defining the classes available?”
David Myburgh: Okay. So that’s all on getbootstrap.com. Let me show you. So this site – yes, let’s go to the top here; pretty long. So if you go to getbootstrap.com, you're going to find everything there. They’ve got the CSS stuff, the component stuff, and the JavaScript stuff. So it’s all here. Like I said, every time I’m working with Bootstrap, I pretty much always have this open. It’s a great reference tool; documentation is very good.
Hannah: Okay, if anybody has any additional questions, please ask them now. [Pause] All right. That’s it for questions. Dave, thank you so much for the great presentation, and thank you so much…
David Myburgh: Welcome.
Hannah: …Heather, for joining us as well. Again, Crosstalk recording will be posted to our website in the next 24 hours. Dave and Heather, would you like to end with anything?
Heather James: No, I just wanted to add that we have a couple of webinars coming up. If you are interested, there’s actually one specifically on mapping and that’s with some Drupal like me folks. So if you saw the map that we have on our site, you may be curious about how to integrate maps in yours and that might be useful for people.
David Myburgh: Yes.
Hannah: Okay. Great. Thanks so much, everyone. Have a great afternoon.
David Myburgh: Yes. Thanks.
Heather James: Bye
David Myburgh: Bye.
- End of Recording –

Customers: You Asked, We Answered: Introducing Highly Anticipated Features and Capabilities [April 3, 2014]

Pages