Pageflakes

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

<pageby comments="false"/>

Definition

Pageflakes is a popular webtop with potential for education. A webtop is a kind of rich internet application that runs in a web browser and that integrates various web-based applications, typically lots of different kinds of information feeds, some virtual office applications, some social software in particular the most popular ones such as Flickr or YouTube, and RSS feeds.

If you want to see an example, have a look at my exported Pageflake Pages. For the moment, just some playing around. Currently it's one of the most useful webtops for educators since its pages can be shared - Daniel K. Schneider 23:34, 22 May 2007 (MEST).

This article contains a very short tutorial on how to use Pageflakes and then an example tutorial for technical readers that shows how to make your own Flakes (this may be moved to a separate page some day).

Notice: I wrote this in May 2007. Pageflakes may have evolved (I only added the anything flake for now - Daniel K. Schneider 20:40, 29 October 2007 (MET)).

Pageflakes in education

Overview

PageFlakes is currently (May 2007) the only well known webtop that allows you to share pages. This opens up some possibilities for teachers which we discuss also in places like personal learning environments or e-learning 2.0. For example:

  • You can build start pages for your students. These start pages may include widgets to search information, information feeds, etc. plus links to other on-line services used in class, e.g. a mediawiki.
  • Your students can build "themed" pages, e.g. a form of digital storytelling
  • It's a small scale personal learning environment. A teacher can encourage students to build a sort of private information portal + shared learning e-portfolio.
  • It's an environment that can be used to drive activity-based and project-oriented teaching. It's an alternative to teaching with a C3MS that in the long run should have more potential. In the short run you gain from not having to install your portal (which has become an increasing hassle because of all the inherent security problems PHP applications seem to have).

If you are unhappy with existing flakes you can program your own (or have them programmed). However, this is not easy (see below).

Using Pageflakes

Starting

That's fairly easy....

  1. Start from Pageflakes for Students and Teachers
  2. Sign up (else you will loose what you did)
  3. Add flakes
    • Add Flake (top right button). I suggest to click on gallery and then search. (Flakes are tagged with keywords, e.g. try tools).
    • If you run out of space, you may Add Page to a page.
    • You can move flakes from one page to another by dragging them over the tabs.
  4. Each Flake has an edit button that allows to configure Flakes. To exit from the dialog click on Edit again. Also, some flakes allow you to add contents trough the Edit dialog.
Sharing

Pageflakes has 3 levels of access: Private (the owner), public (whole world) and shared (team).

  1. World: You can share a page with the world, and in addition allow other persons (team) to modify contents, see next item.
  2. Team: Share pages you want with others (click on "Share" on the page tabs you want to share). I.e. you can allow selected users to co-edit a page.
  3. Flakes shared viewing: You can share viewing of individual Flakes with others (Edit->Export). The code can be imported in HTML Pages, blogs or other webtops (including Pageflakes of course). Then tell your students to import or the other way round (teacher assembles student's widgets).
Important tips
  • Killing flakes: Team members can add flakes, can edit contents, but can not destroy Flakes they added. Only the owner of the page can (i.e. the teacher in our case). So you have to tell team members not to add random Flakes (they can do it on their own home pages).
  • Layout: You probably want a different layout. If your students have small screens, then choose a 2 column layout with one small and one large column, otherwise choose a layout with a bigger middle column. Click on SHARE, then Page Layout. Some Flakes need more space, you have to find which ones you can squeeze in smaller columns.
  • You can import other services by clicking on "Add Feed" (some may not work as expected).
  • Moving pages. Ctrl-click on the tab and drag.

Simple how-to for school teachers

Let's image that a school teacher wants to use Pageflakes to scaffold various educational activities. He could tell each student or groups of students to set up their own personal learning environment and then syndicate contents. Currently, this may be a bit too complicated.

So the easiest solution is to used teacher-sponsored shared pages.

The teacher's pages

The teacher will have his own pages that he can share. There are four ways for sharing a page:

  • Make it world readable (read only for all)
  • Make it world readable and team writable (read only for all ) read/write for team)
  • Make it team readable, i.e your students (read only for team)
  • Share it with a team, i.e. your students (read/write for team)

It's your choice. I'd prefer world readable and team writable.

To create a shared (team) environment with one page per group or student
  • Create a page for each group or student. Optionally, and to speed up configuration for all pages except the first, you can create a template (click on share) and then reuse the template.
    • Click on 'share' in each page tab
    • Select the 3rd option (Share page with a group).
    • Make sure to check the Allow these people to edit box.
    • Then enter emails for each student. Students must a email, since they will receive an invitation to register.
Sharing Options of Pageflakes
  • After they get their mail from Pageflakes students can click on the Invited sign up link and sign in.
  • You also should encourage them to create their own personal homepage.

Warning: Be careful not to use the same browser with different logins. Else you may have to remove cookies or Pageflakes will get confused. So if you test drive, use a different browser or (better) a different computer.

To delete a page: Click on SHARE, then Delete Page

To create a shared (team) environment with one page per subject

The principle is the same, create shared read/write pages for teams. The difference is that you centralize various student activities by activity type in various pages. For some activities, individual students (or groups) would use different instances of a tool (in the same page). For others, students would use a single instance, e.g. for activities that have to do with information bookmarking. All depends on the scope and the architecture of your pedagogical design.

E.g. :

  • You could create a page called Blogs, and tell each group to add a Blog Flake (or do it yourself).
  • Another page could contain management tools, i.e. a task manager for each group, but a common calendar.
  • You may configure an interface (start-page) to the information space of a subject ared

Open issues

  • Support for other languages (like french), a minor problem for university students of course
  • Let team members kill flakes.
  • Wyawidget is world writable in world shared pages (it should not I think). Anyhow, I think that there would be a market for a more powerful forms creation and management CMS tool. E.g. something like PageSetter (http://www.pagesetter.net/), but simpler of course.
  • Also a little inlined wiki would be nice or something similar, e.g. one could add internal links to the NotePad, a link being the title of a note.

Good flakes

For the moment there are few Flakes useful to support student productions. Of course there are excellent information gathering and management tools like news feeds, interfaces to digital artifact and links sharing websites, search tools, etc.). But the main issue in education is not really information but dealing with it. Therefore I list the few basic tools that you may consider using in addition to news feeds and interfaces to social software.

Integrate anything
  • The Anything Flake allows to insert HTML code. Of particular interest is insertion of widgets from other web 2.0 services, e.g. you can insert Zoho applications. Note: This widget replaces some now dead widgets like the Zoho Writer widget.
Writing
  • NotePad (e.g. to write small accounts, announcements, etc.)
  • Blog (small blog with basic functions: articles, commenting, formatting and picture insertion).
  • Note (Sticky messages, e.g. to be used for directions and announcements)

Do not hesitate to repurpose an instrument. E.g. if you need a forum one solution is to create one with Yahoo or Google and then link to it. Disadvantage is that students have to get an extra login. Instead, you could use the blog widget and use the comment feature to reply to a post. For esthetics, rename it "Forum".

communication
  • Mail let's you get mail from major online provides (e.g. Google) plus your own popup.
  • Message Board (sharable).
Planning
  • To-Do-List
  • Class Schedule
  • Calendar (I'd prefer a similar interface to Google Calendar)
  • iCal Viewer (Interface Ical Calendar feeds, i.e. your Google Calendar)
  • Grade Tracker (For students to keep track of classes and grades within classes. A good tool. Now, how about add a third layer with student names and make it a teacher tool ?)
File Management
Forms Creation
  • WyaWidget from Realtime Applications is a really nice Widget Creator with which you can create fill-in forms in minutes. See an example on my Pageflakes test site (go to the student sample page)

Integration of not integrated services

Right now, available widgets may not be enough, e.g. you need a forum and you don't want to repurpose the little blog tool. In this case get access to a forum somewhere else (make sure that your students register there too), then:

  • make a link to the forum
  • add an RSS feed from the forum in one of your pages (Click top-right on ADD FEED, then enter the feed URL in the ADD YOUR OWN input field). It's important that students are aware of what is going on.

Programming your own Flakes

You may add your own Flakes to your home page. Click on ADD FEED (not ADD FLAKE) on top right, then enter the URL of your flake. You can try with code from below, although it's not really useful ...

The Pageflakes API allows you to build web widgets for PageFlakes. Unlike NetVibes news UWA's they only will run in Pageflakes. But you can load them through Pageflakes since you can export any module, so you could import it to NetVibes for example, although display may not be optimal).

Simple static Flake example

Simple Flakes with static content are really easy to produce:

  • Make a valid XHTML file (no XML declaration needed)
  • Add the following JavaScript code to the HEAD:
  <script id="_PAGEFLAKES_Instance" type="text/javascript"></script>
  • IMPORTANT: HTML will be cached. While you edit contents and make sure it looks good, just name the file *.php and rename it later to *.html for efficiency. Then shift-reload your browser.

Source: http://tecfa.unige.ch/guides/js/ex/pageflakes/ (files hello.html or hello.phps). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Sample Page</title>
    <script id="_PAGEFLAKES_Instance" type="text/javascript"></script>
  </head>
  <body>
    Hello, this is my first Pageflake.
    [ ... ]
  </body>
</html>

Add it to your Pageflakes page: from TECFA

Add it to your Pageflakes page: from TECFA / PHP

Simple editable Flake example

The next example shows how to make a very simple widget that allows the owner of a page to write a message of the day or something (read the manual, this is just a summary).

It demonstrates a few more things:

  • Each Flake is defined as a JavaScript class
  • Variables used in different methods must be declared on top
  • The function(instance) method must define an _instance parameter
  • It will be given the "instance id" of a Pageflake class built by the environment. It can be used to access stuff like profiles.
  • id represents the instance of the class. I save it into _id (don't know if this is Vodoo code, but I think that it allows to have more than one instance of a Flake.
  • _id then allows to get ad HTML element id's like this:
$(_id+"Your_HTML_id")
  • All HTML element id's must start with _PAGEFLAKES_, else the above won't work...
  • _instance.Profiles allow to store data
  • There is some HTML Magic:
    • _PAGEFLAKES_Edit will display the code when the user hits the Edit button
  <div id="_PAGEFLAKES_edit" class="edit">


Source: http://tecfa.unige.ch/guides/js/ex/pageflakes/ (file QuotesFlake.phps). Disclaimer: I am not a real programmer, I just want to keep a bit in touch with them - Daniel K. Schneider 23:19, 22 May 2007 (MEST). 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <!-- Made by Daniel K. Schneider, TECFA, University of Geneva May 2007, Freeware -->
  <head>
    <title>Quote of the Day</title>
    <!-- The following script is needed for running the page locally under IE -->
    <script id="_TESTBLOCK_LocalTestScripts" type="text/javascript"
      src="http://www.pageflakes.com/Scripts.ashx?Scripts=LocalTestScriptsIE">
    </script>
    <!-- The following script is needed for running the page locally under Mozilla
    <script id="_TESTBLOCK_LocalTestScripts" type="text/javascript"
      src="http://www.pageflakes.com/Scripts.ashx?Scripts=LocalTestMozilla">
    </script>
    -->

   <!-- ********** Flake class definition ******** -->

   <script id="QuotesFlakeScript" type="text/javascript" >
    /* Definition of the class for the flake. 
       Must contain a single class
       'id' is the instance id available at runtime
    */
   
   function QuotesFlake(id) {
   
   // just a constant, remember all variables inside the class
   var QUOTE = 'UserQuoteStatement';
   
   // reference to flake instance which will be set soon
   var _id = id;
   var _instance = null;
   var _quoteStatementBox;
   var _feedback;
   
   
   // This will load this flake class (only once).
   // 'instance' is the reference to the flake instance
   this.load = function(instance)
   {
     /* The parameter _instance is not the reference to the running
	instance of this class. This is an instance of a different
	class which contains meta data about the flake 
     */
     _instance = instance;
     
     /* get reference to HTML elements using the '_id' as prefix
	$ is a shortcut function for document.getElementById
     */
     
     // _quoteStatementBox gives a handle on contents of the input line
     _quoteStatementBox = $(_id + 'QuoteStatement');
     // _feedback is a div that we will show when the user hits submit
     _feedback = $(_id + 'Feedback');
     
     // 'Profiles' is a dictionary which stores values that persist across session
     if( _instance.Profiles[QUOTE] == null )
       {
	 // do nothing
       }
     else
       {
	 $(_id+"content").innerHTML= _instance.Profiles[QUOTE];
	 _quoteStatementBox.value = _instance.Profiles[QUOTE];
       }
     }
   
   this.submit = function()
   {
     var quote = _quoteStatementBox.value;
     _instance.Profiles[QUOTE] = quote;
     
     // "save" http://en.wikipedia.org/wiki/Pageflakessaves the flake instance with all changes made in profiles
     _instance.save();
     
     // Give some feedback
     _feedback.style.display = "block";
     // Let's add the content of QUOTE to the page
     $(_id+"content").innerHTML= _instance.Profiles[QUOTE];
   }
 }
   </script>


   <!-- **** script block essential to create an instance of the flake **** -->

   <script id="_PAGEFLAKES_Instance" type="text/javascript" >
        var _PAGEFLAKES_ = new QuotesFlake('_PAGEFLAKES_');
    </script>
  </head>

  <!-- What would this vodoo to ?? 
  <body onload="_PAGEFLAKES_.load(App.modules['_PAGEFLAKES_'])">
  -->
   
  <body>
    <!-- This DIV is shown when user clicks the 'edit' link on flake title bar -->
    <!-- All UI element id are prefixed with the word "_PAGEFLAKES_" -->

    <div id="_PAGEFLAKES_edit" class="edit">
      <strong>Tell me the quote</strong><br />
      <div id="_PAGEFLAKES_BorderDiv" style="padding:5px; background-color:#F1EDED;">
	Please enter your quote:<br />
	<input id="_PAGEFLAKES_QuoteStatement" type="text" />
	<input id="_PAGEFLAKES_Submit" type="button" value="Submit"
	       onclick="_PAGEFLAKES_.submit();"/>
	<br />
       </div>
      <div id="_PAGEFLAKES_Feedback" style="display:none">
	Your quotes ought to safe, you can return to Pakeflakes
      </div>
     </div>
    <div id="_PAGEFLAKES_content" style="display:block">
     HOO
    </div>
  </body>
</html>


Links

PageFlakes
PageFlakes in education
  • Pageflakes for Students and Teachers.
    • It's the same environment, but you get a different soup of elements at start (and it's just one click + a sign up if you are happy with it).
    • Daniel K. Schneider thinks that this special purpose startup could be improved a bit. E.g. writing tools (Pageflake's little blog, the notepad) and storage tools are missing. Also we need Flakes to interface with other productivity tools (e.g. concept maps, reference managers and such).
Other
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Pageflakes&oldid=26416"