Our first task in this exciting project is to embed our prezi in a webpage. So, first we need an empty webpage.
Open your favorite HTML editor and open a new empty HTML page. Make sure you are working in the code view.
If you use a simple text editor, you can type the following code:
<html> <head> <title>The world of bees</title> </head> <body> </body> </html>
Save your file as world-of-bees.html.
Adobe Dreamweaver (and most other HTML editors) add additional code to your page as you can see in the next screenshot. The previous code gives you a better HTML page, but it's not necessary for the page to work.
In the following information box, you can find some extra information about HTML and CSS:
Note
HTML is the abbreviation for HyperText Markup Language and is the main language used to create webpages. HTML elements consist of tags and mostly come in pairs such as <h1></h1> or <body></body>. The first tag in a pair is the start tag and the second tag is the end tag, also known as opening tags and closing tags. Between these tags, you will write text or other tags.
In 1989, Tim Berners-Lee invented the World Wide Web at CERN and he developed the first version of HTML in 1990.
CSS means Cascading Style Sheets and is the style language for your webpage. In the beginning, both content and design were written in HTML. With the introduction of CSS, the content was separated from the design. HTML should be used for the content and semantic structure of your webpage and CSS for the presentation elements such a layout, colors, and fonts.
Now, we have to embed our prezi in the webpage. Maybe you have done this before using the Embed option at Prezi.com, but now we'll be using the Prezi Player API for it.
First, we have to add the JavaScript library of the API to our webpage. We could download the library, store it local, and make a reference to it, but it's easier to point to the online library.
Add the following code between the <body> and </body> tags of your webpage:
<script src="http://prezi.github.io/prezi- player/lib/PreziPlayer/prezi_player.js"></script>
Now, we have our reference to JavaScript library and we can actually use it.
Add the following code:
<script type="text/javascript">
var player = new PreziPlayer('prezi-player', {
preziId: "7iob-larbvwr",
width: 800,
height: 500,
controls: true,
explorable: true
});
</script>The preziId in this piece of code is very important and points to the specific prezi. If you use the code in this example, you'll load my prezi The world of bees. If you want to load your own prezi, perform the following steps:
- First find the URL of your prezi at Prezi.com. Open your prezi online and have a look at the address bar of your browser. The URL of my prezi is http://prezi.com/7iob-larbvwr/prezi-hotshot-world-of-bees-9/.
- The code right after prezi.com is your
preziIdthat you have to use in your own code. In my example, it's7iob-larbvwr. - The
widthandheightin this code example are 800 and 500 pixels. You can change this numbers yourself. Default values are 640 pixels forwidthand 480 pixels forheight. - The parameter
controlsis set totrueto show the progress bar and the next and previous buttons in the prezi on the webpage. If you don't want to show the controls, you can leave this code out or set it tofalse. - The parameter
explorableis also set totrueto allow the user to freely navigate through your prezi with mouse or touchpad. If you don't want this, you can leave this code out or set it tofalse.We are almost ready to view our prezi on the webpage. We have to make a reference to a HTML tag to make our prezi visible.
- Add the following code above the JavaScript, just under the
<body>tag:<div id="prezi-player"></div>
The value for the
idshould be exactly the same as the value used to create a new PreziPlayer. Here, we usedprezi-player.
Now, the full code between the <body> and </body> is as follows:
<div id="prezi-player"></div>
<script src="http://prezi.github.io/prezi-
player/lib/PreziPlayer/prezi_player.js"></script>
<script type="text/javascript">
var player = new PreziPlayer('prezi-player', {
preziId: "7iob-larbvwr",
width: 800,
height: 500,
controls: true,
explorable: true
});
</script>Make sure your HTML page is saved and open it in your browser. You should have a working Internet connection because we have a reference to an online source.
The Prezi Player API documentation says opening a HTML file directly in the browser will not work, but as long as you are not using callbacks, it will work. You might want to use callbacks if you want the menu to highlight depending on the path step in the prezi. Then, you'll have two-way communication and the HTML file should be online to make it work. In our examples, we won't be using callbacks.
Opening your HTML page in your browser gives you the result shown in the next screenshot:
In the next information box, you'll find some extra information about JavaScript.
Note
JavaScript is a programming language used to communicate with web browsers. Commonly, it's used on the client side to interact with the user, control the browser, and communicate asynchronously.
Don't confuse JavaScript with Java. JavaScript was developed by Netscape and is always used in combination with another language (such as HTML and CSS). Java was developed by Sun Microsystems and is an Object Oriented Programming (OOP) Language. With Java, you can develop standalone applications and no other language is required. Java code needs to be compiled (translated to machine language). JavaScript code can be used as it is; the browser can read the JavaScript directly. JavaScript is easier to learn than Java.
In this task, we embedded our prezi on a webpage using the Prezi Player JavaScript library. First, we made a reference to the library. Then, we loaded the prezi into our webpage. We used a <div> tag to make the prezi visible in the browser. The next step is to add a menu to our webpage.
If you are not a programmer, but you like the things we are explaining here and want to learn more about coding, take a look at one of these sites: