25 May 2015

How to create a website using Google Drive (Drivesite)

Here's a Youtube playlist on how to create a website using Google Drive, from total beginner, through to most advanced.

The Drivesite concept

If you're working in a team with varying abilities all collaborating on producing content, and/or if that content needs to feature on more than one site and you'd like to cut down on the time it takes to update those sites, then consider using Google Drive to create a site that can be embedded in another site, such as Blackboard. You or your team need only update the documents in Google Drive, and those updates will automatically take place everywhere you have embedded your "Drivesite".

How does it work?

Embedding is a word used for taking content from one site and displaying it inside another site. Embedding is a well known feature of Youtube, and many other 'Web2' services. It's not making a copy of the content, it is simply displaying the content from it's original location in a different location. It's a fancy way of linking.

Embedding uses the iFrame HTML tag. It's a tag worth getting to know because you can easily reuse it to embed other forms of content, any content that has a URL or web address. Here's an example iFrame tag:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLhJG80urSiFhyWZpBswRRXoJSZ7G6CePX" frameborder="0" allowfullscreen></iframe>

You paste that code in your website's editor box, in HTML editing mode. This code is displaying a Youtube video at 560 pixels wide by 315 pixels high. Notice that "frameboarder is 0? This means the embedded content is set to have no boarder, but if you change the "frameboarder" to 1, you'll create a thin 1 pixel thick black line for a boarder. And this iFrame allows a viewer to click the video to make it full screen.

Reusing iFrames

Now, you can reuse this code to embed content from other websites, or whole websites if you like. Just swap out the Youtube URL https://www.youtube.com/embed/Z5N0Oy6hzGY for the URL of the content you'd prefer. For example, https://en.wikipedia.org/wiki/RMIT_University - the Wikipedia entry for RMIT University. Sometimes, you might know the URL for that website's mobile version, and using a mobile version of a website to embed can be a good way of reducing the graphic noise when embedding sites within sites. In Wikipedia's case it's https://en.m.wikipedia.org/wiki/RMIT_University (notice the m. added into the URL).

It's important to note that iFrames don't always work on some browsers, especially when embedding a mobile view of a site. Some browsers get confused when you're trying to force a mobile display version of a site on a non-mobile device, like a desktop. So test your work on the common browsers.

No comments: