CITE Research Symposium 2009 A great-looking and functional Web site with stunning instructions = (Internet + Webapps) Mike H.L. Chui The Hong Kong Institute of Education [email_address] March 7, 2009

The technological climate and the learning opportunities for the Net generation Global Local (Hong Kong) Rapid development of Web applications (Webapps) Increasing WiFi-ready public areas Smaller, more powerful but cheaper devices for mobile learning (e.g. Netbook) Emphasis on experience and reflective learning Popularity of using social networking software (e.g. Facebook) Online publishing of oneself (e.g. Weblog/ Web site)

Signing Up at Viviti.com Go to Viviti ( http://viviti.com/ ) Click on Sign Up Today’s materials Please download the dummy file at: http://home.ied.edu.hk/~mikechui/cite09.zip

Go to Viviti ( http://viviti.com/ )

Click on Sign Up

Enter your email address Decide your favourite Hostname Check availability of Hostname Click on Create My Site to proceed Sign up

Enter your email address

Decide your favourite Hostname

Check availability of Hostname

Click on Create My Site to proceed

Activate Account (after the workshop) Check email and Activate Account Click Manage Website and start to edit

Check email and Activate Account

Click Manage Website and start to edit

Select your favourite theme Suggested theme  The Leaf Click on Click on

Suggested theme  The Leaf

Click on

Click on

You are now at http:// hostname .viviti.com The default Web site

You are now at http:// hostname .viviti.com

Re-labelling the items (in the Primary Navigation box) Four pages will be constructed: Introduction (from Home ) My Interests (from About Me ) My Reflections (from Contact ) My Plans (Add a new page ) This is the Primary Navigation box

Four pages will be constructed:

Introduction (from Home )

My Interests (from About Me )

My Reflections (from Contact )

My Plans (Add a new page )

Re-labelling the items (con’t) Click on My Content > Pages

Click on My Content > Pages

Re-labelling the items (con’t) Click on Home link Enter the following texts, click on Save to finish The URL will be changed to: http:// hostname .viviti.com/ intro

Click on Home link

Enter the following texts, click on Save to finish

The URL will be changed to:

http:// hostname .viviti.com/ intro

Click on About Me link Enter the following texts, click on Save to finish The URL will be changed to: http:// hostname .viviti.com/ interests Re-labelling the items (con’t)

Click on About Me link

Enter the following texts, click on Save to finish

The URL will be changed to:

http:// hostname .viviti.com/ interests

Re-labelling the items (con’t) Click on Contact link Enter the following texts, click on Save to finish The URL will be changed to: http:// hostname .viviti.com/ reflections

Click on Contact link

Enter the following texts, click on Save to finish

The URL will be changed to:

http:// hostname .viviti.com/ reflections

Re-labelling the items (con’t) The following screen will be shown: Still ONE PAGE to go, Click on New Page to add  My Plans

The following screen will be shown:

Re-labelling the items (con’t) Enter the following texts Click on The URL will be changed to: http:// hostname .viviti.com/ plans Click on close button to finish

Enter the following texts

Click on

The URL will be changed to:

http:// hostname .viviti.com/ plans

Click on close button to finish

The default screen

Managing: Introduction Click on Introduction in the Primary Navigation box Click on Edit to change the Heading content Enter the following texts, click on to finish

Click on Introduction in the Primary Navigation box

Click on Edit to change the Heading content

Enter the following texts, click on to finish

Managing: Introduction Edit the Content Block (refer introduction.txt ) Click on to finish

Edit the Content Block (refer introduction.txt )

Click on to finish

Managing: My Interests Edit the Content Block (refer interests.txt ) Click on to finish

Edit the Content Block (refer interests.txt )

Click on to finish

Managing: My Reflections Edit the Content Block (refer reflections.txt )

Edit the Content Block (refer reflections.txt )

Managing: My Reflections Adding hyperlinks , HOW to? Highlight the texts you want to hyperlink Click on the Link button

Adding hyperlinks , HOW to?

Highlight the texts you want to hyperlink

Click on the Link button

Managing: My Reflections Select the File tab, click on Browse Click on Click on Select recipe1.doc Click on Select the file properly Click on Click on Save to finish

Select the File tab, click on Browse

Click on

Click on

Select recipe1.doc

Click on

Select the file properly

Click on

Click on Save to finish

Managing: My Plans Oh no! … where is the Content Block ? Click on Select Content Block Select a proper position

Oh no! … where is the Content Block ?

Click on

Select Content Block

Select a proper position

Managing: My Plans Edit the Content Block (refer plans.txt ) Click on Create to finish

Edit the Content Block (refer plans.txt )

Click on Create to finish

Adding YouTube videos : My Plans Click on Select Youtube Video Select a proper position

Click on

Select Youtube Video

Select a proper position

Adding YouTube videos : My Plans Click on Browse to search a YouTube video Type art of cooking in the Filter field Select the video and click on Select Click on Insert Click on Create to finish

Click on Browse to search a YouTube video

Type art of cooking in the Filter field

Select the video and click on Select

Click on Insert

Click on Create to finish

Embedding music Go to Magnatune http://magnatune.com/ Select your favourite music category

Go to Magnatune http://magnatune.com/

Select your favourite music category

Embedding music (con’t) Click on play hifi for any creator’s work

Click on play hifi for any creator’s work

Click on New: Embed this album on your own site! Embedding music (con’t)

Click on New: Embed this album on your own site!

Embedding music (con’t) Copy the following codes (blue portion only): <object classid= … width=&quot;150&quot; height=&quot;140&quot;> … <embed src= … height=&quot;140&quot; width=&quot;150&quot;> </embed></object> <FONT FACE=&quot;Verdana, Arial, utopia, sans-serif&quot; SIZE=&quot;1&quot; COLOR=&quot;#000000&quot;><br><a href=&quot;http://magnatune.com/artists/albums/juergenson-prospects&quot;><b>Prospects</b></a> by <a href=&quot;http://magnatune.com/artists/chris_juergensen&quot;><b>Chris Juergensen</b></a></font>

Copy the following codes (blue portion only):

<object classid= … width=&quot;150&quot; height=&quot;140&quot;> … <embed src= … height=&quot;140&quot; width=&quot;150&quot;> </embed></object>

<FONT FACE=&quot;Verdana, Arial, utopia, sans-serif&quot; SIZE=&quot;1&quot; COLOR=&quot;#000000&quot;><br><a href=&quot;http://magnatune.com/artists/albums/juergenson-prospects&quot;><b>Prospects</b></a> by <a href=&quot;http://magnatune.com/artists/chris_juergensen&quot;><b>Chris Juergensen</b></a></font>

Select Introduction page Click on Select HTML Code Select This Page and click on Add it Here Paste the copied code (Ctrl + V) Embedding music (con’t)

Select Introduction page

Click on

Select HTML Code

Select This Page and click on Add it Here

Paste the copied code (Ctrl + V)

Go to http://www.clocklink.com/gallery.php Select your favourite clock Copy the code Select Introduction page Click on Select HTML Code Select a proper position, click on Add it Here Paste the copied code, click on Create to finish Embedding Flash clock (Optional)

Go to http://www.clocklink.com/gallery.php

Select your favourite clock

Copy the code

Select Introduction page

Click on

Select HTML Code

Select a proper position, click on Add it Here

Paste the copied code, click on Create to finish

The Final Screen (homepage) [ Remember to Logout when finished editing ]

Thank You! Create your own Webapp list, Reflect and apply the right pedagogies