Getting Started with Hub + Enterprise Sites

hi everybody welcome to getting started with hub and enterprise sites my name is Graham Hudgens I'm on the product team for the hub and enterprise sites and with me hi my name is Rob strawberry and I'm a software developer on the hub an enterprise sites team so we have a good agenda for you we're gonna overview the product talk to the basics of using both of the applications we'll build a site and evolve it with some features and then we'll take a look at some more advanced functionality with regard to matching your site in with your organization's existing web properties and as always we'll leave you with lots of resources so that you can you know reach out to us afterwards if you have more questions so RGS enterprise sites is a capability that allows you to create custom websites and web pages with the target being the non GIS user so if you think of the portal as the GIS home base this is basically embedding that functionality in places on the web that interest non GIS users such as in an internal use case like a wiki or things like that within your arcgis enterprise deployment in your network we have a similar application in ArcGIS online called arcgis hub it is a easy to configure cloud platform that lets you collaborate with your community to accomplish information driven initiatives the key word here is community most people's community are not GIS experts so very similar mission both applications utilize the same underlying website tech and so we'll be kind of talking about them interchangeably throughout the presentation arcgis hub is a part of our json line and it comes in two flavors RJ a basic and RJ's hub premium and we'll be focusing mostly around the basic functionality but highlighting the areas where if you license the premium functionality you get extra features layout options and the ability to actually do some true two-way engagement with people outside of your organization similar Enterprise sites is an aspect of your enterprise portal it's there by default you don't have to install it and should just be there after 1061 of the enterprise solution and it lets us do sites and pages and various things within there so there's a a bit of a difference so I get this question sometimes when should I use hub and one should I use enterprise sites hub does have more features than enterprise due to the nature of its deployment so if you can use our gist online I definitely recommend that you use Argos hub because it has more features and functionality it also has a couple of webby features meaning it's optimized to run on the web we put it behind what's called a content distribution network which is a caching layer that makes it run better and we take extra steps to make sure your Google page ranking is high finally we have three sub systems that enterprise does not hub can support multiple custom domains in the ArcGIS online platform so you can run like at my site org as well as a different domain we have an extended download system and caching over the platform so we can make more data formats available on top of your feature services and data sources and the search experience is a little bit improved so kind of reiterating the point if you can use the online option then that's the right one to choose but a lot of you are in the boat where you want to deploy privately in your own networks which can't be online and that's when enterprise sites really shines so if you can't use a SAS product you can deploy yourself you get full control of the enterprise portal web adapter and all that good stuff so yeah so let's start with the basics my recommendation here is that you build something with absolutely no clan so that you get a feel for things so I recommend this by making your first site and to do that you'll need to be a creator user with essential apps in enterprise or hub you'll see us here in the hub sites and pages or enterprise sites and pages you need to be I call it publisher ish you don't need to be a full publisher to make content but you need these five user privileges to be able to use the app at a minimum and if you have extra privileges these two specifically a couple of other features of the hub will an enterprise sites will open up to you the top one allows you to bring others into edit so if I wanted Rob for example to edit my site and I had this privilege I then basically add him to my site steam and he'll be able to edit and the other is an administrative power to push people into groups it's really nice because if I wanted to share this site to Rob he would have to accept it if I don't have this privilege so it's kind of nice to be able to push it user into a group and give them a link so they don't have to go about accepting it but not a not a deal-breaker if you don't have either of these privileges you're able to use the app I'm just fine if you're looking for finding the app it's available in what we call the app launcher in the home application or your portal that's this little drawer at the upper right hand side and you can play club or sites depending on where you are and if you're an online you have the create menu and you have the site's option that's coming to enterprise in a later release but isn't available currently so when you click those apple onto your hub you will land on what we call the overview which is a place that shows you all of the sites and content you've created in the application kind of like the name so here you'll be able to see your recent and you'll be able to launch new sites via the big blue new button and again depending on which features you've licensed so if you're in a premium you might have additional cards like this community card and this community dashboard as you may be signing users up to your sites to do things so if you have that feature you'll have a little bit more in overview and here's what it looks like an enterprise so let's take a look at the application and let's just screw around with it a little bit to get a feel for where everything is so yeah Here I am in in here and I can come to hub and you'll see I get bounced out to this overview and right here you can see I can return to the sites I've been working on or I can come back and look at a list of everything that I have but today I'm just gonna click new and I'm gonna make my first site if you come into this screen and you can type in a name and click go and it'll make you kind of a default one if you have hub premium you'll have this browse templates button and you can browse various other layout choices made available by a Content team here at ESRI so these are some good starting points a lot of people if you're starting out for the first time like to build a generic open data site so you can pick this one give it a name and once I do that I will end up within the site itself so you'll get kind of a copy of that template and you'll be able to see some of the layout choices that we've made and we'll be looking at the layout in more detail here in a little bit the primary way to get around your site is this navigation menu here so just to give you a quick overview of each of these sections we have the site itself which is the layout of the home page so this is the kind of primary primary way people experience this website we have the dashboard dashboard is useful to get a sneak peek of how many times your site's been viewed since I just created it it's obviously at zero right now we have teams if I wanted to involve Rob and I had that extra user privilege I can pull him in to my core team and he will be able to edit the content of this site I have events here in events I can make events that hang off the site this is only available in hub premium because it's meant to try to engage your users but I can make a sample events sample description I can spell description wrong which is always fun and come down pick where it's gonna happen let's say like a dress at random and pick when it's gonna happen so it's gonna happen later today and I can publish it maybe to the my org or publicly whatever I want to do so kind of gives you an idea of you know I can hang events underneath my site and I can bounce back into that edit mode and edit and change it if I'd like to gives you a little list about events we also have feedback very similar user experience for creating surveys we'll look at that in a little bit and if you have hub premium as you sign people up to your site and as they click follow they will show up here you can come back here for messaging them and doing things of that nature finally we have the content library and the group manager and these are both meant to get content onto your site and these have a sort of mirror relationship with the site's search page I'll show you kind of that side so here's where I can manage the content that shows up on my site and if I X out I'll see that every site has the equivalent of a search page underneath so since we haven't set this up yet my site doesn't have anything on it if I was to search my site for data I'm gonna end up with nothing so if I wanted to manage that I can click this edit pencil and I can come here and work with the content that's on the site finally if you're looking to get around you can come back to these menus so if you make multiple sites in the application you can go back to your list of sites or initiatives here and you'll be able to see them all and pick jump into another one if you want to switch between which sites you're working on so this is our sort of local menu and this is our global menu one other thing to note is that there's this little page guy right here on the site layout so sites can support multiple pages if I come in here I can basically create another layout give it a name that's probably going to be better than that and you'll notice that I kept my header but I have a wholly different section here that I can work with and layout so pages give us this ability to have lots of layouts on a website a multi-page website and at any time if I want to get back to something in my site I can come to this menu or I can use these breadcrumbs to kind of find my way back so go back up to the site and get around and we'll be looking at this in a lot more detail but I just wanted to kind of walk you through the layout just to get you oriented so when I made that site what happened in the app behind the scenes in portal or online you know as with everything everything is items in groups so when I made a site if I have hub premium you'll notice I get a couple of extra things but fundamentally a site is an item it's either a hub site application or a site application depending on enterprise or online but the exact same concept I also get some groups behind the scenes the content group is what's powering those search results and the content library that we were just looking at and the core team power is the ability to do shared editing of content like the site itself so depending on your privileges you might not have some of these groups when you create it but if you're a fully privileged user you're going to get all of these items if you're a premium you get a group that houses your followers this is so that as users come to your site I can click follow this little star and I will show up as a follower and this will allow you to figure out who of your community is interested in this site and maybe send them updates as you keep your content updated and you also get an extra item when I make a page I get an item for that too and when I make an event we make a group for that to house the attendees of the event similar to followers so if you're using the application and you go into online or you go into your enterprise portal you'll notice it makes a lot of stuff behind the scenes that's just gonna be automatic I definitely recommend you do not mess with this stuff and once we know what you're doing it's best to manage all of these items in the hub application or the enterprise sites application then it would be to do it directly okay so now you're hopefully more familiar with the sites process and building your first now you need to do the harder job of actually figuring out what you're gonna build and there's a saying in scuba-diving which is plan the dive and dive the plan I definitely subscribe to this mantra I think a planning exercise is a really good thing to do with stakeholders take your first project so that you can all share a success and you know what success looks like ahead of time when recommending what to start with really you could start with anything you want as long as it's manageable and scoped correctly and you have enough time to invest in it so if you if you want to just play with hub or Enterprise sites on the side I recommend picking something like a private data sharing site or an open data site for your public data which is I think what we're gonna try to do first because they don't take as much time you can set them up configure the content share it to the right audience and then you can kind of set it and forget it and it'll just stay up to date as data is shared to the appropriate groups and you know we'll kind of just live out there you can also make project related sites if you have a specific goal or Urban Development or you name it you can feature a site around the GIS content that's related there the key there is that you should be coming back to that site periodically to keep it updated as the project moves forward and that gets even bigger if you start doing things like programs like really broad projects that span multiple months or years and especially if you're trying to engage with your public and get them engaged with you digitally where they're contributing information and you're contributing content that will take more of your time so if you have a larger percentage of your day to give to building that content then no problem but if you're trying to start somewhere easy that you can kind of get something going and get a quick win I recommend more of these sorts of data sharing use cases so with that in mind why don't we do that well we'll focus on building one of those sites and take a look behind the scenes as to what that takes to do and this is obviously multiple ways to get at the same objective the way I'm gonna go about this is just a personal preference but you can do this in any order that you want so I'm a really content person I like to think about building all the Legos first and then using them to make something pretty afterwards so I'm going to come back to the content library and what I want to do is I want to share public data from my organization to you know the anonymous public and I want to have a website that is a part of my GIS that people can stumble on through Google and then get at some of my data and leave and never really realize it was part of the GIS so with that intent in mind I want to add some content that already exists in ArcGIS online to my site so here in the add existing content window I can search all of the content in my organization that's relates to app data documents pretty much anything what I'm gonna add is a couple of layers from the place I live Montgomery County that are public and since I'm doing a public sharing site I want to make sure that these are the right ones so you might have to check with some of your other colleagues to make sure you're sharing the right information but you will there's a bunch of data housekeeping stuff you should be doing to make sure that the data is really intuitive and that's gonna be covered in another talk about deep customizing your sites so if you're interested in that search for that one and watch a little bit of that to get some best practices about getting these data ready for use on a site but I'm gonna assume it's already in really good shape and these are the ones I want and I'm going to add and behind the scenes what this is doing is this is adding them to that site catalog so I on my page and I have my three pieces of data and if I jump out really quick I can see that I now have data on my site and when I click on them I can see this sort of item details light page that is automatically generated if I don't like anything about this and I want to change some key information the hub has kind of a metadata light editing experience now and I can use that or I can jump back to my content library and continue to upload more and more things so you kind of see the relationship the content library and your Site Search are kind of you know completely joined at the hip so let's assume that that's the most content I want to add the other thing I can do here is decide what I want to run the top so depending on the type of content I have maybe I don't have events and I don't want that to show up and maybe I don't think of it as data but I want to call it you know something like data sets I can basically customize these little tabs at the top save those changes and it gives users an ability to filter the data down by various things and just like with before if I change that I can change it here and all has the same relationship so let's move into the the more fun part I would say of building a site and it's really about making a really killer layout that catches people's attention and gets them to the right purpose of the site so we used this template which is really nice this open data template this is really emphasizing search but you're gonna want to think about the number one thing you want people to do with your site and try to make sure that that is so to speak above the fold high on the website very clear because you really only have a few seconds of some of these eyeballs before they either engage with the site or move on to something else so in this case I think the search bar is appropriate now when laying these sites out it's a WYSIWYG editor what you see is what you get so you don't have to jump between previewing and editing you can just use it and you'll notice as I move my cursor around I'm getting these little controls all the sites are laid out in their own rows and you can see the rows on the right hand side as I move my control up and down and within the rows are the cards and there's a lot of different card choices so on the left-hand side of the site to choose the cards that we want I can use the layout option and I have all these draggable cards so if I wanted another row beneath this green block I can add a row and there's some settings here that are really useful for changing maybe making a row have a different color from the overall theme which we'll talk more about theming in a little bit I can also add cards by just dragging them into the rows and then I can configure them so this card for example is one of our ways of embedding content so if I really wanted everybody to experience a specific app or map I could pick it and embed it and they will basically be there live for me so with the layout options what we really want to do is come up with the right content for our site's purpose so since my site is going to be about featuring lots of items and lots of data I'm gonna focus more on the search capabilities and these category cards searching categories are really useful because if you're building a site with potentially thousands of pieces of item you might you know have a lot of different ways to subdivide that data so the category card lets me pick tags or categories or groups that are deeds subdivide the data that's on my site so if I had all of my data here let's go look at what tags I used I use districts on this data set so maybe I want to have just all my districts and boundaries you know I can basically configure this to be a district category I can pick an icon for it that represents districts sure we'll use the you know the column building and then this will search the site just for data tagged with districts these are some of our most engaging pieces of website layouts because they basically tell the user what the answer is to what is on the site so if I say and I should probably rename this to say districts or boundaries if I put a card like this I can click on it and basically be taken to just the data that is tagged with that tag so it's a really good way to use probably the organizational systems you already have within your ArcGIS online or portal experience but just surfacing them in a nice friendly way to show people how to traverse potentially thousands of items the other card I recommend is already here for me but it's called the search card and if you're looking for it it's down here in the list and this is exactly what it sounds like it is just a bar that searches what's on the site what's nice about our search is it has autocomplete and it also surfaces those little data set vs. app facets that we configured on the content library so if you're the kind of person who knows exactly what they're looking for they can use that to find the site content and as far as public sharing of data above the fold this is gonna do the job search and here's the answer perfect below the fold we can do some more fancier things to feature some of our work if you have a premium inviting people to follow we'll collect a list of actual email addresses and identities of people so that you can tell them when your site has content updates or invite them to an event for do things like that so that's a good idea if you have a premium if you have a number of apps or maps or you want to feature certain content you can use a gallery card and you can configure it either to pull all the content from your site using a group in dynamic mode or you can use manual mode to pick literally some specific things that are that you want to share so maybe I just want to share these three items when I do that they will just pop in really cool thing about the gallery is it will reflect the users login and we'll talk about that a little bit but this is a good below the fold pulled card because if somebody's interested in the topic and is looking for a different way of experiencing it they can come here and they can basically work with it there now one thing I do recommend no matter what your site is I think you should not just focus on data there's such a wealth of capability in the ArcGIS platform I recommend for people to come back to the content library once you have all your data once you have your primary objectives scaffold now and add some more additional ways to experience the same content so what I'm gonna do for that is I'm going to click new and I want to make another and we recommend the other apps that are in the platform I recommend really almost every site should have a story map you can use experience builder or web app builder to make an immersive interactive web experience around a data set this is the kind of stuff that I would say attracts other types of thinkers not just the data thinkers so for example my father is a you know an English major and he doesn't really is not really at all interested in dashboards or datasets but if you give him a story map he will read it like a news article because of the way his literary background so having lots of different ways to experience the same content put on your site is a good idea so you can come here you can make a story map for example like the one I just made and if you really liked what you did you can feature it somewhere in your layout so maybe I want to use that gallery card and now instead of picking the random apps I'm gonna pick you know that story map that I just created great so this is a good way of you know kind of configuring your content to be exciting and so I definitely recommend making apps and maps to back up your great data and feature it all on your site so people can choose their own adventure they don't have to experience just the one way so you can get at different people who come from different kind of walks of life um now let me say at this point maybe I want to get a review from a communications person or somebody who's got a marketing background or brand background or some of those types of things I'm gonna pop over to teams and come into the core team and this is where I can add others who can edit my site so if I go to add members what I'm gonna do is I'm gonna search for Rob and he's in there so hi Rob here welcome to the team now because I had that ability to push Rob into the group he's just there and he's ready to go and I can even use teams here if you're an ArcGIS online not in an enterprise unfortunately I can message Rob and say site is you know ready for review and maybe I can copy let's not copy the whole URL but we'll copy check it out and Rob's gonna get an email from me via the platform and he can come in and log in and edit the site so let's pretend that we you know we did that and we released this site and you know we reviewed it with our stakeholders and they're like yeah this is great so you know they love the fact that you can jump into data sets and you know how this it's so seamless you know and maybe that we will talk more about the header here when Rob shows us how to customize it but you know they love the simplicity the web experience and the fact that you know it works really great on a mobile phone I can basically just explore the data on the go find it from Google all that good stuff but in my feedback with them they say you know what I want a similar sharing experience my stakeholder life for private data for one of my departments and then they also give me the requirement that they don't want to make a separate site people have come to love this site as kind of the center for the non GIS like space of your data and even employees are using it a lot but they want to add more content to it that's privately shared so to do that I'm gonna advance my site to be what I call a hybrid public site with public data on it but also have some areas of the site that are private and with private data on it so imagining I want to add the police data now to this but the police data isn't something I can share publicly because it's sensitive if I wanted to do that we have a lot of options to leverage the ArcGIS sharing model to build these sorts of hybrid sites so first off I might ask my stakeholders you know and they just use this one layout and just access the data on the search page or do they need their own kind of space maybe they need their own space so this is a great use of pages I can come in here and I can make a police you know sharing area a terrible name and when I make a page it's initially shared privately so even if I come back to my site and I say great my sites public like that's great my sites public but I go over to my police sharing area that will still be private so already this this is a private space for the police information maybe we want to have like sensitive data rules here and maybe we want to feature a certain dashboard or something like that so I can still use all of these cards like that app card to embed an app I can use any of these other cards maybe I want to embed a specific map or scene and you know pick again a private map maybe I want to only pick something that's just shared to my organization what's always fun about demo or exists I never know what I'm gonna get but great I got a map on my site with one data point on it and it's privately shared and I can save that now how will the police people find find this in my site they come to this site already today one area of your site that's really useful for this this sort of dynamic content being hidden in plain sight is your header so we'll talk way more about the header but one of the great options in the standard or prominent modes is the menu bar and if I add a link to existing content from my current site or initiative I can basically say okay let's add that page and I'm gonna add the police sharing page and let's add that yeah just that does that for now so now I get this extra tab and what's so cool about all of this is that if you've already set up all your users in your enterprise portal or just online then the people who can see it will be able to see it wow that's great and the people who can't if you're just the anonymous public will get nothing so you can build this sort of blended web experience that lets you do all that really really effortlessly I'm gonna log back in here and edit this again okay so one other thing is how do you share the information to your to your stakeholders if you have hub premium you can do this without visiting the home application but effectively what we need is called a team call these supporting teams so I'm gonna call it the police department all this is doing behind the scenes is making a group so you can feel free to do this in portal or your you know your home application in ArcGIS online so here I can add people from my organization like my boss Andrew here and I can also flip over to the content and decide what content from the current initiative I want them to have access to so I think I want to just give them the police sharing data and you know maybe a map or something so I can pick the content that is going in and share it to them this kind of streamlines that sharing that you would have to do otherwise in ArcGIS online but if you ever want to do more advanced things you can always pop out into the portal or home application and manage groups and sharing directly here this is a much more powerful application for doing those sorts of activities so there's a couple of those features exposed in the app but you can leave and do more advanced sharing over there so yeah at this point we've made a Sahib Republic private site and we walked through it all so now we want to see about how do I make my site preserved in my ecosystem of web properties and for that I'm going to turn it over to Rob you you okay thanks Graham so similar to what Graham was talking about earlier this idea of being able to share your GIS without your users ever realizing that they're in your GIS or left your web ecosystem today I'm going to be talking about like how you might preserve a standard user experience across a wide variety of pages whether it be your own app or an ArcGIS hub or enterprise sites site application and the example that I've chosen to illustrate this today is Mashable for those of you who might not be familiar Mashable is an online tech news resource and the reason why I picked it is because it has a very obvious brand that is preserved across all of its pages and it has this great header at the top here that we can talk about in terms of preserving the user experience yes so let's take the persona of a person who might be an employee of Mashable who is tasked with sharing their GIS with the consumers or users or stakeholders of masterball in a way that could be useful through ArcGIS hub or enterprise sites and so it'd be great if they could have all of the awesome tools that ArcGIS online or your portal provides without having to worry about any implementing any of that in a mask or website and so to start to start illustrating this we are just going to start by looking at out of the box RJ's hub for enterprise site that I've created here I haven't changed anything about the site other than the fact that I added some web maps that might illustrate on something that might be of interest to Mashable's users so for example these are met web maps I just have to do with median salaries tech companies in Silicon Valley and DC but everything else is just as you would get out of the box with the site that you create and hover enterprise sense and so if we take a look at Mashable its header it's always a good idea to kind of understand what you need to build and kind of what your goal is and so for this presentation we're going to see if we can implement this kind of header theme up here with the slight blue theming in a way that I'm going between Mashable website I might not realize that I'm necessarily leaving the Mashable ecosystem so we've got this header it's got some hover effects it's got some dropdowns which we're going to talk about we've got some social icons over here and a login icon additionally there's some other small things which are probably important to preserving one user experience like a favicon or a title and so we're just going to start out in hub by looking at the header that comes out of the box and so this standard header that comes out of the box here we can see it already looks pretty good in terms of just it's got the text we need and it's pretty low profile like we would expect but let's go ahead and edit some things we can change the type the title to be Mashable and then another thing we can do is use the theme editor to actually change the colors or the fonts of the text and other elements in the header to look like kind of what we're going here and so let's just start by seeing if we can transfer this light blue theme over to Arc jazzhub so there are a variety of ways to start by just to inspect web elements and kind of get the styles that you want I prefer to actually kind of get down and dirty with the chrome inspector and so if we get down in here we can actually get the actual hex value of the background color here another thing that you can do if you're maybe not as tech savvy is you can get any kind of like easy dropper tool they have desktop Chrome extension applications that are really great that you can use to grab colors like this but sometimes they're not exactly accurate see see it's calculated this hex value but that's different from what's actually defined in the CSS here so we're gonna go ahead and go back here into the theme editor we're gonna change the background of both the global map which I'm going to talk about in a minute and the header and so here we go we've got a header that's the same color down to the exact hex with what we've got here we've also got some other great features that come with the out-of-the-box hub header like social icons so masterful has got these this Facebook in this Twitter icon and so we can actually enable it with Facebook and a Twitter icon just like this and paste our social links in here as a way to link out to those pages which is really great one last thing we can do is similar to what Graham was mentioning earlier you can actually add menu links right here grandma's linking to existing content but I'm going to show you how we might want to link to other pages so to preserve this header let's make a link to video so here's the link here to the Mashable videos page and so I'll just say add link to an external page on public video and I'll add the link destination you can see it pops up here and just like Ramon is explaining what the WYSIWYG I'll save and I'll view it and it looks pretty good but one thing that is pretty nose noticeable is this header at the top here it's this header on top of the header that you just go it's called glue nav and all that gram talk for a second about kind of some of the features that it brings to the table thanks Rob yeah global navigation allottee of your user identity we have a global search bar you can see there that has that autocomplete in there we also service things like notifications and we have this hamburger over on the far left I'm making them jump to hoops right now the nice thing about this is it it's it's a place for us to Park functionality that is consistent across all of your different hub sites and we do prefer that you leave it on but as Rob is gonna outline if you have stakeholders who need you know it to be exact it is an option that you can disable just not one that we recommend disabling yeah exactly so let's say your stakeholders are really really insistent that we really follow this low profile header up here so we can just go back into the edit mode of the site pop into settings and check out the interactions accordion and you can see right here we can disable go now and when we save that and view it sometimes you need to do a hard refresh once you do a hard refresh you'll see that the club when I'm is gone and we've kind of gotten that low profile that we kind of want and our header that we're building but let's say that you bring this back to your stakeholders and you explain I build this header it uses hubs custom or builds out-of-the-box header functionality but it's still not good enough for them they really are insistent that we really follow the design to the tee like they want the exact same spacing they want this hover effect they want to be able to have this expanded menu drop-down and basically it's just at this point you know we're kind of pushing the boundaries of the limits of what the out-of-the-box Club header can provide kind of looking at building our own thing and so what we're going to be doing now is this idea of building our own custom header specifically this Dom element right here it's really easy to do this in hub I just need to go into the header pane I pick a custom and you can see we've provided out-of-the-box Dom structure for a really simple custom header for this presentation we're not going to use that but we have these two panes over here for HTML CSS and it provides a full rich text editor with syntax highlighting for enterprise sites users that'll be coming in tonight we're really excited about that but for now we're just going to clear this all out which is super easy the woozy wig is really great for editing this makes the most ESS you can see that the header is gone and now we have to think about how we're actually going to build this and hub and basically there are two approaches that we can take we can copy and paste the Dom from source or we can build it from scratch so for those of you who might be familiar with the Chrome web inspector or any other web inspector of whatever browser you use you can always just go in and copy down like this and then when you paste it it'll paste all of it in and I can kind of start by straight-up copying down from the source and it going from there and honestly while this might seem like a good idea because you might think to yourself oh if I copy Dom I'm actually avoiding work this actually in practice isn't a great idea just looking at the code itself we can see that this is a lot of Dom structure and it's way more than it should be necessary for just building a simple header we can also see there's a whole lot of other info in here that hub hub application or the enterprise sites application just doesn't need so we have these weird attributes tags that are definitely not normal for HTML and it's probably that these are offshoots or resulting from whatever front-end framework that Mashable users but for our purposes it's something that means nothing to hub and it's just something that we don't need some other reasons for not copying or even if you can copy the Dom structure exactly it's almost impossible to copy CSS exactly there's some Chrome extensions out there that I've played with that can let you do this but the fact of the matter is you CSS rules that are currently being applied and as we can see on the Nashville website there's a variety of CSS rules that are being applied as the browser goes from mobile to desktop to medium screen size so on and so forth and you're just gonna miss out on these rules by just trying to copy and paste them and then biggest reason is that wherever you're trying to build a header from out of your source might be using a CSS system that's completely different from Club and hub we use bootstrap 3 and while bootstrap is a pretty ubiquitous CSS framework not necessarily all websites use it and so you might end up copying over dom or CSS classes that just have classes or expect certain conditions to be met that just won't exist in hub and so I'm going to show you I'm gonna go and go down the path of building a header from scratch I'm going to show you how we're gonna leverage boost when I did this myself it took approximately two two and a half hours so it's really not that bad of an investment in terms of like development time and you'll see that it's definitely worth it in terms of simplicity so I'm just gonna start out with some really easy and simple Dom that I just got folded we literally just have a div with an unordered list and an ally in it we're gonna start out with this logo this logo has an anchor tag that links out to match to pull in two images now one important thing that I really want to speak on is when you look at the Mashable logo it has this anchor tag with the relative href to just slash and in fact all of these links here up in the vegetable header are all relative URLs so when copying them over to hub if we just had a slash here instead of mashable.com none of those things would work since hub is or enterprise sites your site would be a separate sent from Mashable so it's important to make sure that you're copying over to fully formed URLs that will actually link out to where you want to go so we do this and we concede we've got the Dom structure and everything copied over properly and it's also great because it's even pointing at the same source images as the existing Mashable header is but obviously we need some CSS rules here and so like clean and sub so I'm going to paste over some CSS that I've built and I'm just gonna briefly explain it most of this is going to be scaffolding in terms of properties facing things or putting in correct colors it's pretty easy to do this honestly most of it I was able to just do on my own without really having to look at going to CSS Mashable too much one of the more interesting rules that I think is important to understand is this concept of this hover effect there's actually two images here one is a light image one is a dark image and they have to differ classes and they hide or show based on whether you're hovering over the logo with your cursor and so as you can see here in a CSS class the image with the dart class is hidden by default but on hover the dart class image shows and the light touch Limits hides and so you'll see when we hit apply did hit this custom CSS we get the exact same hovering effect that we see here in the Mashable header the WYSIWYG again is really great there's really no reason for me to toggle between the view in the Edit States because it just works and so that's pretty great in terms of you know getting a good start towards what we're looking for in the Mashable header so the next thing I want to talk about is these links right here the first link right here video is just a simple link it has go to drop downs and you click it and it just takes you to an address so it's gonna be super super easy to emulate this onhub again here's some Dom really really a simple Dom it's literally just going to be a li with an anchor tag in it again I've got a fully formed URL on my hit apply it's popped up here but it needs some styling so we're gonna copy over some styling that I'm pretty important and we're gonna look at this for just a second so you can see most of this again is just going to be styling to properly Center things I'm gonna explain flexbox in a little bit and why it's so great for centering some colors that we're gonna apply when we hover over the link cursor just some basic other styling attributes but one thing I really want to talk about is this farm so when looking at the HTML or the Dom that's in mash when you look at this anchor tag here you can see that it comes with the font of próxima Nova regular and that is something that I've saw copied over into the CSS however in CSS and in HTML it's there's no way to reference non regular fonts unless you actually have imported the font file from an HTML file or from a Europe or some other file that you might have somewhere else and so in this case proximate over regular is a font that Mashable is actually purchased it's not one that's available for free but I'm going to show you how because theoretically if you were on the masterful team you'd have access to this one I'm going to show you how you would apply a question font to the text in your header so that we could get be able to transfer our fonts over from our source site so I'm gonna hit apply and you can see that the link on itself already looks pretty good another great thing about the WYSIWYG editor is we disable all links and edit modes so there's no worry of accidentally clicking anything and losing any of the changes you made but I'm gonna go over here to Google Fonts you can find it really easily at Fahnestock google.com and I'm just gonna look for a font that we might want to pick for our headers Rubik looks pretty good so I'm gonna go ahead and hit plus it's gonna add it into my cart and when I do this google fonts will actually go ahead and build a CSS import or a link attribute that contains our folk with it for the purposes of hub you don't actually need this all you need is a link to the actual font and so when I go back into the theme editor which we used earlier to style the color of the header I'm gonna go down here and to fonts and you can see that you can set a font for the text on the page and a separate font for just a text in the heading obviously in this case we're just looking to style the heading so I'm going to go here I'll paste in the URL to the font that I want make sure that it's all fully formatted correctly I'll type in the name of the font and once we validated that that's all good what a preview you can see right there it might be harder to see on your screen but the front did indeed change we seeing a live preview of the font and once we hit apply that font has now been applied to the style sheet that's being put into the page one last thing that we have to do is for this text to display in the phone that we want we do need to fix the CSS rule since we are overriding it in our CSS custom CSS so down here in approximate of a regular I'll change this to Rubick I'll hit apply and you can see that the font has now applied I'll hit save and let's just check out the live preview really quick looks good and if go back to Mashable cite it you can see I'm gonna go ahead and toggle between them and you can see we're already looking pretty good even in terms of spacing it's hard to distinguish between both of them so that's how you would just add a simple link and put style that link with the file in text and you might work the next thing I'm going to show you is how to make a bootstrap drop down menu which is a really really important concept for any header and it's really a strength of the bootstrap CSS grid system one of the best documentation is that there is on this is the bootstrap documentation itself which you can really easily find by just googling bootstrap drop down and it's got a really great documentation for all the kind of dropdowns that we shop offers and so let's go ahead and paste in this HTML that I've built it's another li excuse me except it's gonna have a little bit different a little bit of a different structure than what we've been pasting in before if I inspect this I'm actually going to show you how boostrap Styles the Dom tags to show and I drop down menus when you click them you can see when I click this button here an open class or a show classes automatically applied to the parent div that encloses the button and it's drop-down and it's really super easy to do this the only thing you need to remember to do is add a data toggle equals drop-down to whatever anchor tag or the button element is supposed to toggle your drop-down it's also a good idea to add some aerial attributes as well generally you want to start out with area has pop-up equals true and area xfinity people's false and bootstrap will totally handle changing all of those dynamically for you and you can see them change down here in the Dom right there you can see that just went to false and if I click it again it goes to true and that's great for screen readers and make sure that your dropdowns are accessible when we look at Mashable's dropdowns we can actually see that these are being triggered by hovered not by click and it's generally agreed upon among the web development community that in terms of best practices for accessibility and screen readers it's best to toggle dropdowns with the click and not a hovers just for screen readers and for mobile optimizations so that's - what I'm gonna do here today so this li that I've pasted in we have our anchor tag for entertainment and that's going to be the anchor tag that's going to toggle the drop-down and then we also have this simple div here called drop-down menu it's a good idea to use an area labeled by with an ID to put to provide a semantic link between the toggle and the drop-down menu itself for screen readers and I also have a class here and I'm gonna in a minute put in some CSS styles that would show and hide this div depending on whether or not the open class is applied to this li so when I hit apply Entertainment is here but it's obviously doesn't have the drop down yet it's just not styling properly so I'm gonna come in and grab this CSS paste it in the bottom here basically what this does is it is going to apply certain colors based upon whether or not the drop down is showing or not but most importantly it is going to apply a display on flex when the drop down menu is open versus a default display of nuts that drop down menu shows when I hit apply you'll see we have this really basic drop down menu and it works in the WYSIWYG editor which is really great and so now we've got folded a basic accessible bootstrap drop down one more thing I want to touch on this little caret here it might seem daunting at first to try to play it in shapes like this in an HTML custom header you might think to yourself that you need to find an SVG tee and put that in or something like that but there's actually a really number of great ways to do cool things with CSS needs to know I always highly recommend trying to find solutions with just pure HTML and CSS before trying to consult crazy or complicated things like frameworks or JavaScript and so I found this really great CSS trick called CSS triangle which just provided me with some styles for making a basic triangle and you can see I made a class called carrot down which applies the styles from the CSS strip and then applies into the thumb here and so now I've got this great drop-down engine so we have a drop-down menu we scaffolded it but obviously the drop-down menu here and bootstrap drop-down it's a little more complicated we have these links here on the side that are arranged vertically and we have this row of posts that seem to contain dynamic content and so I'm going to show how we're going to build something like that in a simple sense so let me just paste in this updated HTML that's going to contain items let me fix the formatting here really quick format is still a little messed up but hopefully that's readable you can see we have a parent div or its parent ul that is going to excuse me we have a parent div the drop down menu that's going to contain to us and that's gonna be our links and our posts and this is right here we're going to talk about the power of flex box so normally using bootstrap or pretty much any other kind of like basic manual CSS it would be a real big pain to style this all in a way so that we could have two children just here one with content arranged vertically one with constant arranged horizontally but flexbox is really powerful because it just lets us do all of this with a couple of CSS rules so when we look at this drop-down we can think of the drop-down as being one parent div with two children gives the child divs is this slightly darker blue box here with links and the slightly lighter box here with posts and so we'll have a parent div with the Flex direction of row and that's going to tell the child is to arrange themselves horizontally the first trial did will have a flex direction of column and that gives us this vertical stacking of links and the second child div will have a flex direction of row which will give us this horizontal row of links and so after I apply this it's going to look pretty wonky but then I'm going to go and grab my CSS which applies the Flex drop the flexbox styles that I just described and you'll see here that the parents dropped them in new class has a flex direction over like I described and then the two child divs which are drop-down links and drop-down content have flex direction of rows so John ten links here has a flex direction of column and then the subnet posts are gonna have a flex direction Dubrow and you can see now that the subnet looks pretty great in terms of comparing it with what is on mesh or we've got our links arranged here in a nice column and we have our subnet posts that are arranged in a row one thing that's good to keep in mind is that flex direction row is actually the default so for this child div here I actually didn't need to find a flex direction on it and so now we've got a great out-of-the-box bootstrap menu that looks pretty similar to what Mashable has here in terms of a drop-down menu and so just continuing on now that we've done the hard work of like putting in a basic link in a drop time and you all you really need to do is just kind of copy and paste and continue to scaffold the dominant CSS that you want so I've just got a couple more allies I'm going to put in here that are gonna add a couple more links so I've got all these links for the different pages that match for has all the CSS is already there and because of that there's no need to do any more work to generate CSS to get everything looking properly so if we go to view we can see obviously there are some differences between our hub header that we built and our chess club versus the header that we have a match for the most part they really look pretty much the same which is really kind of getting us to that goal of having one unified user experience across all your sites further things that we can do to push this it's very easy to add additional links like to the profile page at the end you can add your own SVG's and you know you might have access to the SDGs that are on the pages from a copy toggle in which case it's really easy just to add those into the HTML editor and then have them linked out to other places but one thing that is important to talk about is when we look at more complicated elements like the search bar or maybe these links here a lot of these things have a lot of back in JavaScript behind make them work so you know the search might be simple it might just be a URL whistle creep Rams on it but if it triggers a JavaScript action there's really no way to emulate that and a custom pattern up and the reason for that is we just don't allow custom JavaScript to be injected into the application for performance and security reasons so anyway continuing on we have you I think we're looking pretty good there's some more stuff to do here to give up without optimization but other than that we're looking pretty good so going back to our presentation there are a couple caveats to building a custom header this way I already mentioned JavaScript some other issues that you might run into is obviously you are rebuilding something in a different environment so there might be some repeated code and additionally you know if something were to change and the source that we were copying from you would need to manually update it in your header as well there's always going to be some differences most likely it's hard to get an exact clone and something you're trying to copy from but it's often sufficient to get close enough just to preserve that you know as long as the user doesn't realize that they are leaving your ecosystem your online presence is kind of the goal here and then okay and like I mentioned earlier there's still some more work to do in terms of mobile optimization continuing on from this I've got some resources compiled that might be really useful if you want to go ahead and take a shot at building your own custom header I've got the HTML and the CSS along with this public web site available here for you to take a look at flexbox is a great great great way to learn how to do style and position elements on a page correctly via CSS it's super easy and I highly recommend learning it and the CSS tricks is also another great website I didn't go over the bootstrap grid system too deeply here but hub is fully bootstrap compatible we use bootstrap 3 and so you know if you want to use bootstrap classes when building any kind of custom Dom elements whether it be in a header or a text card or something can always use any kind of glue static classes to apply the styles you want I got my fonts from fun stuff bukhan they have a huge repository of free fonts again you might also have forms within your own organization that you have access to and then is another great thing just to keep in mind it's always a good idea to develop with screen readers or accessible users in mind just to make sure that your application is usable usable amongst the largest possible audience and then one last thing that probably I should have made I should have talked about more during this presentation is as I'm building Dom elements and hustling header I always remember to use custom CSS classes to style and apply styles to my Dom elements and the reason is I'll do it's unlikely it's definitely possible to collide with some existing native web CSS that we might have any application but creating classes is like I going to edit here when I go to header I go you smell you can see I've got classes like Mashable header and Mashable item these kind of classes the chance that they'll collide with some other CSS class that might be in hub or on your site are very very low so it's always a good idea to use custom CSS classes rather than trying to just scope CSS to elements using selectors which is possible but not recommended and so with that that brings an end to my demo I'll go ahead and hand it back over to Graham to talk about some further resources that are useful in terms of building you're going on your hub your enterprise site thanks Rob so yeah let's wrap up here with just a couple things you can take home I get asked this a lot for enterprise sites and for hub we're gonna go to see a lot of existing examples of great work now with enterprise that's tricky because your networks aren't on the internet but I can give you the good news which is hub has lots of online examples of great sites so you can click hugged and ArcGIS comm /pages such color and see a variety of different sites that are out there for you to check out I don't really notice too much of a difference between an enterprise site design and a hub design because they're both trying to get at that underlying idea of communicating GIS information to a non GIS audience so definitely use this as a site to get inspired if you want to go spelunking a little more specifically you can come in here and just search all sites across what's public in the world of SAS software so you can see all these different sites and you know use these as well so that's one really great resource if you're looking for design inspiration we also have a variety of learn lessons and pads now available at learned at RGS com they will walk you through some of this in more detail kind of flew through a lot of topics and I know Rob went deep on one area but there's a whole lot more to take a look at and these links if you're looking for more resources we keep them in the overview in app right below the cards so our documentation is always a great go to but we also have that examples gallery I just showed you you can reach out to us on geonet and if you're interested in driving the direction of both applications please join our user lab that's available at that link right there in your overview finally if you want to hear about the direction of the products and get a monthly newsletter from from us sign up for a newsletter at that link it will include kind of some of the changes to the app as well as some of the recent developments so definitely recommend that if you're kind of interested in keeping tabs of what we're working on finally a Rob touched on a couple of accessibility best practices but we've compiled this blog to really go deep on how to design your site to get good scores when it comes to will CAG ratings and things like that so check that out and yeah thank you so much for watching we look forward to hearing from you and thanks for taking the time to watch this video Cheers

Channel: Esri Events

Views: 2,122

Rating: 4.7777777 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Geographic Information System

Id: WiAnWWET9gE

Length: 59min 1sec (3541 seconds)

Published: Mon Apr 06 2020