Learn how to publish a responsive project to be viewed on a mobile device, such as a tablet or smart phone, by publishing to HTML5 and selecting relevant options.
- [Instructor] Well we now know that when we go to publish our responsive project, it will be published to the HTML5 format for mobile or m-learning. That means it's going to work on any device. Smartphones, tablets, computer screens. Well with our Red 30 new hire orientation project, which is responsive, when we're ready to publish, we can go to two different spots. We've already seen what happens when we go to file and select publish from here. That opens up the publish board device's dialogue and you can see the publish as format is set to HTML5.
There's no changing that. Let's click close. You may have also noticed the publish button, a dropdown button up here on the ribbon. Clicking this shows exactly that same option we just saw publish for devices, but we could also publish for devices as an app, an app that would run on smartphones and tablets. In other words, we're leaving out the computer screens and clicking this will open up, again, publish as HTML5 but publishing to iOS or Android and to do this, you'll need to have a PhoneGap login.
There's your username and password fields and you would log into your account to be able to do this. I don't have one. We'll click close. And let's go back to publish because we could also publish to Adobe Connect. Clicking this again will publish the same format. Now you'll need a name and a URL to publish to Adobe Connect. Let's click close and look at the last option. Clicking the dropdown one more time, publish to Adobe Captivate Prime.
Here you'll also need a Captivate Prime account. You can see the account can be set up right from here. So if we were to click publish, we'd be prompted for all of our information to sign up for Adobe Captivate Prime account where we could publish our project and host it there. Let's click close though and we'll go back to the one that everyone can do and that is publish for devices. So from here, we are stuck with the HTML5 format. That's our responsive project for mobile learning.
You could see the project title's gonna be the same as the name of the file we're working with, Red30_06_final if you're catching up. The location where all of the files and folders will be stored is customizable. Just click the folder icon to choose somewhere more convenient. I'm going to choose a desktop so we can go look at these files. With that selected, we click select folder down on the bottom right and it now shows up in the location field. If we were gonna be handing this off to someone who was going to administer it for us, well we could zip the files to compress them, make the overall set of files much smaller to pass on.
I'm gonna leave it on zip and then down below, you could see a number of settings based on our preferences that we can access directly from here. For example, we know have a quiz in our project. That's why display score is selected as yes. We saw accessibility earlier. We could go to any of these preferences by clicking the blue link. Clicking yes for accessibility for example opens up our preferences for publish settings and there it is. Enable accessibility.
So we could change that from here along with our other options that we have selected. Let's click cancel. So we're ready to publish. All we have to do is click the publish button now and it will be published to the selected location. All of the files and folders required will appear there. So we sit back and watch the publish progress just like when we were previewing our project and it should say eventually that it was completed. Do we want to view the output? Clicking yes would open up our browser.
Let's click no. Takes us back to our project and we can minimize it now to go to our desktop where we see a new folder and this one here, if I just drag it out into the middle is the exact same name as the file we were working with that just got published. Double clicking this folder will open it up and show us that we have some subfolders in here, so all of our assets et cetera, and then we also have the icon representing your default browser, mine being Chrome.
The index file is the one we can double click to launch this in our browser. Let's go ahead and do that. Double click the index and it opens up right there. We're ready to go. Welcome to Red30 New Hire Orientation. To continue with learning, click continue. Click a topic to begin. On we go, clicking our way. As you can see, it looks very much like it did in our previews earlier on as we were building our project.
Let me just click through quickly. We've seen this all before. There's our special effects, our animations. We can start the quiz and everything looks very much like it did. Clicking now quickly takes us to the next question. Let's see if there's remediation, choose the wrong answer. Aha, click anywhere to review and return to the questionnaire. There it is, click again to go back to our question.
Just as we would expect after previewing so many times and fine-tuning our project. I'm gonna get one wrong here. Incorrect, incorrect. Fill in the blank here. And eventually we get to the quiz results where we see our final score. Sorry you fail. Passing a little higher than 66.67% so we can retake the quiz in this case, review where we went wrong.
That one looks okay, that one was okay. That one we had a second chance, that's wrong. That's wrong and that one's right. Okay, so we've reviewed. Now let's click continue and that takes us to our last slide where we could choose to start over or exit. Clicking the exit button closes up our browser and takes us back to where we were. So that's all there is to publishing to HTML5, a responsive project, but you may also wanna create e-learning and publish to a learning management system, a LMS, something we're going to talk about next.
- Explore how to build, preview, and close projects.
- Create responsive projects.
- Use Fluid Boxes to make your work more flexible.
- Edit master slides.
- Add and program buttons.
- Select the best file format for your project.
- Add closed captions and voiceovers.
- Explore other eLearning platforms, including SCORMs.