Pageflakes: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 1: Line 1:
{{Stub}}
{{Stub}}
== Definition ==


The '''Pageflakes API''' allows you to build [[web widget]]s for [http://www.pageflakes.com/ PageFlakes]. Unlike Netvibes news UWA's they only will run in Pageflakes or alternatively loaded through Pageflakes (Pageflakes allows to export any module, so you could import it to Netvibes for example).
The '''Pageflakes API''' allows you to build [[web widget]]s for [http://www.pageflakes.com/ PageFlakes]. Unlike Netvibes news UWA's they only will run in Pageflakes or alternatively loaded through Pageflakes (Pageflakes allows to export any module, so you could import it to Netvibes for example).
Line 5: Line 7:
This article is a ''very short'' tutorial (well rather just examples) of how to use pageflakes and then make your own Pageflakes.
This article is a ''very short'' tutorial (well rather just examples) of how to use pageflakes and then make your own Pageflakes.


See also: [[AJAX]], the introduction to [[web widget]]s and [[Universal Widget API]] (an other mashup).
* Technical readers, see also: [[AJAX]], the introduction to [[web widget]]s and [[Universal Widget API]] (an other mashup).


== Pageflakes in education ==
== Pageflakes in education ==
Line 19: Line 21:
== Using Pageflakes ==
== Using Pageflakes ==


That's fairly easy.  
=== Starting ===
That's fairly easy....


# Start from [http://student.pageflakes.com/ Pageflakes for Students and Teachers]
# Start from [http://student.pageflakes.com/ Pageflakes for Students and Teachers]
Line 27: Line 30:
#* 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.
#* 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.
# Each Flake has an edit button that allows to configure Flakes.
# Each Flake has an edit button that allows to configure Flakes.
# Share pages you want with others.
 
; Sharing
# Share pages you want with others (click on "Share" on the page tabs you want to share).
# You can allow selected users to co-edit.
# 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)
# 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)


Have a look [http://www.pageflakes.com/daniel.schneider/ Daniel K. Schneider]'s Pageflake. For the moment, just some playing around - [[User:Daniel K. Schneider|Daniel K. Schneider]] 22:31, 22 May 2007 (MEST).
Have a look [http://www.pageflakes.com/daniel.schneider/ Daniel K. Schneider]'s Pageflake. For the moment, just some playing around - [[User:Daniel K. Schneider|Daniel K. Schneider]] 23:04, 22 May 2007 (MEST).
 
=== 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.
 
; Writing
* [http://www.pageflakes.com/Community/Content/flakes.aspx?moduleKey=5353 NotePad] (small accounts)
* [http://www.pageflakes.com/Community/Content/flakes.aspx?moduleKey=776 Note] (Sticky messages, e.g. to be used for directions and announcements)
* [http://www.pageflakes.com/Community/Content/flakes.aspx?moduleKey=820 Zoho Writer Documents] (Interface to Zoho, one of the better online tools).
 
; Mail
Pageflakes Mail let's you get mail from major online provides (e.g. Google) plus popup your own
 
; Planning
* [http://www.pageflakes.com/Community/Content/flakes.aspx?moduleKey=6028 Class Schedule]
* [http://www.pageflakes.com/Community/Content/flakes.aspx?moduleKey=5352 Calendar] (I'd prefer a similar interface to Google Calendar)
* [http://www.pageflakes.com/Community/Content/flakes.aspx?moduleKey=761 iCal Viewver] (Interface Ical Calendar feeds, i.e. your Google Calendar)
* [http://www.pageflakes.com/Community/Content/flakes.aspx?moduleKey=757 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
* [http://www.pageflakes.com/Community/Content/flakes.aspx?moduleKey=780 Peerfactor File Sharing]
 


== Programming your own Flakes ==
== Programming your own Flakes ==
Line 94: Line 121:


Source: http://tecfa.unige.ch/guides/js/ex/pageflakes/ (file QuotesFlake.phps).
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 - [[User:Daniel K. Schneider|Daniel K. Schneider]] 22:31, 22 May 2007 (MEST).
Disclaimer: I am not a real programmer, I just want to keep a bit in touch with them - [[User:Daniel K. Schneider|Daniel K. Schneider]] 23:04, 22 May 2007 (MEST).


<code><pre>
<code><pre>
Line 229: Line 256:
; PageFlakes in education
; PageFlakes in education


* [http://student.pageflakes.com/ Pageflakes for Students and Teachers].  
* [http://student.pageflakes.com/ 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).
** [[User:Daniel K. Schneider|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).


* [http://weblogg-ed.com/2006/using-pageflakes-as-student-portal/ Using Pageflakes as Student Portal] desribes a good example.
* [http://weblogg-ed.com/2006/using-pageflakes-as-student-portal/ Using Pageflakes as Student Portal] desribes a good example.


* [http://jstearns.org/wp/2006/12/15/using-pageflakes-for-digital-storytelling/ Using Pageflakes for Digital Storytelling], retrieved 22:31, 22 May 2007 (MEST).
* [http://jstearns.org/wp/2006/12/15/using-pageflakes-for-digital-storytelling/ Using Pageflakes for Digital Storytelling], retrieved 23:04, 22 May 2007 (MEST).


; Other
; Other

Revision as of 23:04, 22 May 2007

Draft

Definition

The Pageflakes API allows you to build web widgets for PageFlakes. Unlike Netvibes news UWA's they only will run in Pageflakes or alternatively loaded through Pageflakes (Pageflakes allows to export any module, so you could import it to Netvibes for example).

This article is a very short tutorial (well rather just examples) of how to use pageflakes and then make your own Pageflakes.

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)

Have a look Daniel K. Schneider's Pageflake. For the moment, just some playing around - Daniel K. Schneider 23:04, 22 May 2007 (MEST).

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.

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

Pageflakes Mail let's you get mail from major online provides (e.g. Google) plus popup your own

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

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:04, 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=12088"