Aggregated Pages

Aggregated Site Overload

For the past week we have been exploring aggregated sites. An aggregated site is essentially a website that lets you collect and display information from multiple different sources on the internet. On the particular aggregated site creator that I chose to use, Protopage, this process is done via the use of widgets.


We were given two different aggregated page creators to explore (Netvibes & Protopage) with the directive to create a site using one of them. I decided to start off by taking a quick peek at each of the two. I looked at Protopages first. At first glance, it seemed really busy. I then went to take a look at Netvibes. I loved the clean look of the sites that could be created. I quickly signed up for an account. When I went to start adding widgets to the page, the frustration began. I have some experience with website creation and widgets in the past. Netvibes looks really cool, but adding custom widgets can be overly complicated. I know if I kept playing with it, I could have figured it out. At that point, I didn't want to waste any time, so I headed back to Protopages.


Thank goodness for user-friendliness! Although Protopages seemed cluttered to me at first, it was so much easier to add custom widgets to the page. I was able to add timers, weather, YouTube, Twitter, my blog, etc. The widgets on Protopage use OPML aka Outline Processor Markup Language to create and display widgets. For most users, you can simply use the news feed option or web page widget to embed a website. The news feed option utilizes an RSS feed (Rich Site Summary--sometimes called Really Simple Summary) to display a list of linked headlines or other links on a given site. If you embed a website using the web page widget it uses inline frame embedding to display an accurate view of the website. You can scroll and even click to go to another page within the embedded frame. If a website does not display using the web page widget, you can use the web page code widget.


Embedding & iFrames:

With the web page code widget on Protopage,  you must either know the embed code for a given site OR you must know iframe tags. On most websites that allow embedding, if you click on SHARE, you will find an option for embedding. Copy/Pasting the information provided there will allow you to easily embed your site. If there is no embed code provided, then you can use iframe tags on most sites. To embed a page with iframes, simply type the following:


<iframe width="360" height="400" src="http://www.typesitenamehere.com"></iframe>


Within each iframe you can specify the height and width of the resulting object. A common error people make is embedding an object without specifying the height and width. If you do this, you might only get a small box on the page. Using the width and height tags, you can easily change the size the object is displayed within the frame. The src tag is the source or link for the embedded object. Two other common errors people make when adding iframe tags on their own is either forgetting to use quotation marks around the link or forgetting to add the closing angle bracket or close the iframe tag. A breakdown of the code is as follows:


<iframe --- open the tag

width="360" --- width of the embedded object. It must be followed by an equals sign. The number value must be displayed in quotes.

height="400" --- height of the embedded object. It must be followed by an equals sign. The number value must be displayed in quotes.

src="http://www.example.com" --- source of the embedded object. Must be enclosed in quotes.

> close the tag

</iframe> end tag


There are other things that you can add to the tag to change the appearance of the embedded object, but for the sake of simplicity, I only messed with the width and height attributes. Note that iframe tags do not work on all websites.




My Protopage Site:

Link: Techie Ally

Screenshots:

Home

YouTube

Ed Tech on Twitter

Evaluating Tech Tools

Tutorials:

After messing around with the page for awhile, I decided to make a few tutorials. I filmed the tutorials using the screen recording feature of Quicktime on my iMac. I was able to upload them to YouTube fairly easily. Since I'd made a slight error in the instructions on one of the videos, I even learned how to add annotations to an uploaded video using YouTube! :)


The following video covers the following:


How to add a hyperlink using a Rich Text Sticky Note.

How to add a YouTube channel using RSS.

How to add a YouTube playlist using the Web Page Code widget.

How to add a website using the Web Page widget.

How to add a Twitter feed using RSS.

How to add a Twitter search term (hashtag) using RSS.

I also created a quick video on how to add background music using Spotify:

After going through the process of creating a Protopage aggregated site this week, I realized that this was A LOT OF FUN! I think I gave up on Netvibes too quickly, so I'll go back and explore that platform more at a later date.

So long till next week.