Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now let's have a look at perhaps the most powerful tool Apple has given us inside of iBooks Author, and that's the ability to add HTML5 Dashboard widgets directly into our iBooks Author documents. This opens up the possibility to have almost an unlimited amount of control and power to be able to add interactivity and content directly into our iBooks Author documents. Now, creating most interactive widgets is well beyond the scope of this course. You'd have to use tools such as Dashcode, which would require you to do a lot of programming.
Hype, which is a great tool for creating interactive HTML5 objects. But I found a web site that will help us create some interactive widgets that we can add directly into our iBooks Author document. Let's begin by going ahead and creating the widget, and then we'll add it into our document. Go ahead and open up your favorite web browser and go to classwidgets.com. This is a great site that offers free widgets that you can create right on their web site and they'll export the widget, so you can add it directly into your document. For this movie, I'd like to create an interactive Google Map.
So we'll come over to the Widgets Wizard section and click on Google Maps. Now, this is how easy it is. All we have to do is give a map title and a URL. So in order to get the URL, we'll come over to Google Maps. You can access that by going to maps.google.com. Then simply go ahead, drag the map to the location that you want, you can double-click to zoom in to an area. I'm going to zoom in to the area of the Channel Islands National Park. I'll get my zoom set the way that I want it. I can use the plus and minus arrows or the slider to zoom in or out, and I can drag the image around until I get the map showing exactly where I want.
Next, I'll simply come up to the Link tool, which as of the recording of this movie, is up here in the upper-left corner of the image. The URL is automatically selected for us and all we have to do is press Command+C on our keyboard to go ahead and copy that. We can then go back over to the Class Widgets page, and in the Map Title, we'll go ahead and title our map, Channel Islands Excursion. For the Map URL, click inside the box and simply press the Command+V key on your keyboard to paste the text in. All right, we're all set. Go ahead and click the button that says Create Widget.
Your web browser should attempt to download the file, and you may get the Widget Installer that pops up and asks, Do you want to install this widget? Do not install the widget. Just simply click the Cancel button. We don't want to install the widget, we just want to get a hold of the widget. Now, we'll go ahead and minimize our browser, and we'll open up our Finder to our Downloads folder where the widget is located. We'll go ahead and click one time on the widget to select it, then click again to select the text of the name of the widget, and then we'll go ahead and edit the name down to simply just Google Map.
We'll then go ahead and drag that widget on to our Desktop where it'll be a little bit easier to work with. Next, let's go ahead and add the widget into our document to see what it looks like. Now, of course, we could go in our document and go up to the Widgets menu and add an HTML widget. But we've already seen that method in several other movies. Let's go ahead and simply drag the Google Map widget and drop it directly in to our document. The HTML Widget object is automatically created for us. Now, when we look at the default widget that Class Widgets gives us, it's fully functional.
It's got a default image though of this generic map, and it'll be nice to be able to replace that map with something a little bit more custom. Let's go ahead and select the widget in iBooks Author and Delete it, and then we'll go back to our web browser and go back to our Google Map. We'll close the little pop-up window, now let's make a custom image that we can insert. We'll go ahead and click the small triangle to hide the sidebar, and we can readjust our image so that we get the map showing up into the middle section with as much information showing as possible. You can then press Command+Shift+4 on your keyboard.
You'll notice that your cursor turns into small crosshairs. You can then click and drag a large selection of the map and then release your mouse. Now you want to make sure that the selection that you create is at least 1024 x 768 pixels. I like to try and capture more information than I need, and then I'll typically open that image up in an image editing program, such as either Photoshop or Fireworks, and then crop the image down to exactly 1024 x 768 pixels.
It might take a little trial and error to get your screenshot to be just right. But you need to make sure that the screen size is set correctly. All right, let's go ahead and minimize our browser, and I'm going to go ahead and minimize my iBooks Author document as well, so we can see our Desktop clearly, and we can see the file that we've got. When we take a screenshot using the Command+Shift+4 keyboard command, you'll have a screenshot that'll appear on screen, and it's formatted as a .png file. Which is the exact right type of file that we need to replace inside of our Google Map widget.
To get in to the widget itself, hold down the Ctrl key on your keyboard and click one time on the widget. From the pop-up menu, select Show Package Contents. The widget is a special type of folder that contains a lot of different documents and one of the documents inside of this folder is a PNG file called Default.png. It's got a capital D on it, and this file is exactly 1024 x 768 pixels. With that file selected, go ahead and press the Command key on your keyboard and then press the Delete key that'll throw that document in the trash.
We can then click on our screenshot and click one time on the text of the screenshot, and then re-title it to be the same Default.png. We can then copy and paste this document directly into our widget. To do this, simply select the widget and press Command+C on your keyboard and then click inside of the widget and press Command+V, the Default.png file is pasted directly into our document. Now, we can close our Widget window, we can open up our iBooks Author document again, we may need to minimize it a little bit, and then we'll simply drag our Google Map widget directly into our document, and when we release, the widget is created for us.
We can maximize our window again, now we can place and resize our widget. I'll go ahead and drag it over to the right-hand side until my alignment guides let me know that I've snapped into the correct location. Then I'll grab the lower left-hand corner, and I'll start dragging the widget out until I get the widget to an appropriate size so that the rest of the text on this page flows down to the very bottom on my screen. The last thing I'll do is I'll go ahead and change this to a Floating image. With the page with only one screen of text, it doesn't really matter a whole lot, but I like having all of my images set to Floating so that they'll remain on the page where I place them. Unless I really want the image tied to a particular bit of text.
All right, let's go ahead and add some customizations to our widget. Since we simply dragged the HTML5 Widget onto the page, we'll need to do a little customization. We'll need to open up our Widget Inspector, which was not opened up for us. The Widget Inspector, for an HTML5 widget under the Interaction tab, simply gives us the ability to choose another widget if we wanted to. Since our widget is set up properly, we'll then go ahead and click on the Layout tab and make sure that our Title Label matches all of the other Title labels throughout our document. So we'll go ahead and change this from Interactive to Figure.
We want to have our Caption set on here, and we also want to have a Background, and we'll go ahead and change the background fill color to this nice gray color so that it stands off the page a little bit more. Finally, we'll go ahead and edit the text for our title. We'll click one time on the Title and then select the text. We'll type in Map of the Channel Islands. And for the text at the bottom, we'll click one time on it and then double-click it, and then triple-click it to select all of the text. Here, we'll let our users know that this is a custom interactive Google Map created with classwidgets.com.
Custom Interactive Google Map created from www.classwidgets.com. All right, our HTML5 widget is looking fantastic. We've got all the different components that we need, and we have a clickable Google Map that our users can interact with directly inside of our page. And we didn't even have to write any code.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 64158 Viewers
119 Video lessons · 71617 Viewers
125 Video lessons · 32294 Viewers
103 Video lessons · 31505 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.