Pageflakes

Draft

<pageby comments="false"/>

Definition

Pageflakes is a popular webtop with potential for education.

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 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).

• Technical readers, see also: AJAX, the introduction to web widgets and Universal Widget API (an other mashup API that I found easier to play with, but right now NetVibes can't be shared - Daniel K. Schneider 23:34, 22 May 2007 (MEST)).

Pageflakes in education

Overview

PageFlakes is currently (May 2007) the only well know webtop that allows you to export or even 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.
• Your students can build "themed" pages, e.g. a form of digital storytelling
• It's a small scale personal learning environment
• 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.

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).

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 students or group 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 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)
• Share it with a team, 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

• 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 it.
  • 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 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. 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 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.

Open issues

• Support for other languages (like french), a minor for university students of course
• Moving around pages
• Let team members kill flakes.

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 all news and interfaces to social software.

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)
• Zoho Writer Documents (Interface to Zoho, one of the better online tools).

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 Viewver (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

• Peerfactor File Sharing (not tested by DKS)
• Box.net Online Storage (your free 1GB harddisk)

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 developer pack (i.e. a PDF how-to file).
• Blog (News)

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).

• Using Pageflakes as Student Portal desribes a good example.

• Using Pageflakes for Digital Storytelling, retrieved 23:19, 22 May 2007 (MEST).

Other

• Pageflake entry at wikipedia