Pageflakes

The educational technology and digital learning wiki
Jump to navigation Jump to search

Draft

Definition

Pageflakes is a popular webtop.

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

Pageflakes in education

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 in place like personal learning environments or e-learning 2.0.

  • You can build start pages for your students.
  • Your students can build pages, e.g. digital storytelling
  • It's a small scale personal learning environment
  • 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 the search.
    • 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.
Sharing
  1. Share pages you want with others (click on "Share" on the page tabs you want to share).
  2. You can allow selected users to co-edit.
  3. Share code for individual Flakes with others (Edit->Export), then tell your students to import or the other way round. E.g. ask students to send you the code for their blogs (yes there is blog flake)

Good flakes

For the moment there are few useful Flakes (besides the excellent news feeds, interfaces to digital artifact and links sharing websites, search tools, etc.). The issue in education is not really News, but dealing with News. Therefore I list the few basic tools, you may consider using in addition to all news and interfaces to social software.

Writing
  • NotePad (small accounts)
  • 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

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=12101"