Set up your own Profile in Mahara: Part 2

Exclusive offer: get 50% off this eBook here
Mahara 1.2 E-Portfolios: Beginner's Guide

Mahara 1.2 E-Portfolios: Beginner's Guide — Save 50%

Create and host educational and professional e-portfolios and personalized learning communities

$23.99    $12.00
by Derrin Michael Kent | February 2010 | MySQL Open Source PHP Web Development

In this article series by Derrin Michael Kent, author of Mahara 1.2 ePortfolios Beginner's Guide, we will look at creating our own profile page and using the Mahara text editor. Read Set up your own Profile in Mahara: Part 1

Adding a text box to your profile page

One useful thing you can add to your profile page, or any View, is a text box. These are extremely useful for giving meaning to your web page. You can use the text box to put in descriptions or snippets of information that help structure your View in a more logical way.

In the next Time for action section we look at how exactly you add a text box to your profile page. Along the way, you will encounter for the fi rst ti me Mahara's drag-and-drop user interface for adding items to Views, which is is very exciting! One of the things that make Mahara stand out is its flexible framework for creating web pages. It is extremely intuitive as you will see, and reflects in some ways how you would create a poster display—taking bits of information such as text and pictures, moving them around until you are happy with their location and then sticking them in place. Of course, the advantage is that, with Mahara, they aren't stuck down forever with glue and can be repositioned whenever you like.

Let's add a text box to our profile View.

Time for action – creating a text box for your profile page

  1. Click on the Edit Profile Page button in the Profile submenu. You will see a page that looks a bit like this:
  2. You will notice that you are being encouraged to select different blocks from within a set of six tabs at the top of the screen and drag them down onto your View page. Later we will be looking at these blocks and learning how to position them on our page. However, right now we are focusing on how to work with the text box. Click into the tab called General. You should see this:

  3. Click and drag the text box icon somewhere onto the space below to position it amongst the other blocks already on your View layout. You will see the other blocks move as you are dragging to make space for the text box. You will also see a dotted gray line showing you where the new block will appear. Here is a basic diagram showing the drag-and-drop action:

  4. Can't drag and drop in Internet Explorer 6.
    The functionality allowing us to drag blocks around the page when we are editing a Mahara View is enabled by JavaScript. Most modern browsers support JavaScript as default, including Firefox, Safari, and Internet Explorer 7 and 8. Unfortunately, many people are still running Internet Explorer 6 and Mahara's drag-and-drop facility won't work in this browser because of problems (or bugs) it has with layout that newer browsers don't. You can still use IE 6 without the drag and drop feature, and use the radio buttons instead, but we recommend you to upgrade your Internet Explorer browser or (even better) download an open source browser such as Mozilla's Firefox: www.mozilla.com/firefox/.

  5. A box will open. Click into the Block Title and add your title.
  6. Click into the Block Content box. Type in here the body of your text box. Janet Norman decided that she would like to have some information about Mahara on her profile page.

  7. Click Save to finish and that's it, you've added you first text box.

What just happened?

You just added a text box to your profile page.

A section on your View is called a block, and you've just learned how to add a new text box by clicking and dragging it onto your profile page. Blocks are what Mahara uses to personalize your profile page and your Views. You can add and delete blocks, and move them around. There are actually quite a variety of blocks, and the Mahara developers are keen to keep adding to the list. We have started here with a basic text box, as it's probably the one you will use most frequently.

One of the things you probably noticed when adding text to your text box was that you have a number of editing options available. Janet would like to make her text look more interesting, so let's revisit our text box and look at what these options do.

Options in the text editor

You will probably find that you have already used most of the options in the text editor when working in word processing programs. Let’s have a quick look at some of the most commonly used options.

Icons

Function

Set up your own Profile in Mahara: Part 2

These icons can be used to make your characters bold, italicized, or underlined

 

Set up your own Profile in Mahara: Part 2

Align your text to the left, to the center, to the right or justify your text into a square, newspaper-style layout.

 

Set up your own Profile in Mahara: Part 2

Add bullets or numbers to your lists of text.

 

Set up your own Profile in Mahara: Part 2

To toggle your page into HTML mode.

 

Set up your own Profile in Mahara: Part 2

Add a hyperlink to your text.

 

Set up your own Profile in Mahara: Part 2

Break an existing hyperlink.

 

Now let's try formatting some of the text you have just entered.

Time for action – editing a text box by adding a hyperlink

  1. Open the text block you created earlier for editing. You can do this by clicking on the icon that looks a little bit like a cog at the top of the block.

  2. We are going to add a hyperlink to the text. Did you notice that the two link icons are grayed out and unclickable? This is because you can't hyperlink to something before you have highlighted it. Do this by clicking and dragging you mouse over the text you want to hyperlink. Now you should see the two hyperlink buttons in color.
  3. Click the Make Hyperlink button (the one that looks like a chain) to start creating your hyperlink from the word(s) that are highlighted. Jane has chosen to make a link from the word "Mahara" to the Mahara website. You should see a new dialogue box similar to the one below:

  4. You now get the chance to enter your link. Jane therefore enters a link to the Mahara website http://mahara.org. She has also added a Title to her link. This title displays when the user hovers over the link.
  5. Click Insert, which will create your link.
  6. To finish, remember to click Save, otherwise you will lose the work you have just done. You should see the link highlighted in a different color:

What just happened?

You just edited a text box by adding a hyperlink.

In the last section, we showed you that HTML editing is one of the options in the text editor. Web developers have traditionally used HTML code to write their web pages. It will be useful for regular Mahara users to learn a bit of basic HTML in order to gain more control over their Mahara View pages.

The World Wide Web Consortium offers free, beginner-level HTML tutorials at http://www.w3schools.com/html/.

Mahara 1.2 E-Portfolios: Beginner's Guide Create and host educational and professional e-portfolios and personalized learning communities
Published: February 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Taking the formatting and editing one step further

Let's now have a look at some of the more advanced options available to you in the text editor.

Icons

 

Function

 

Set up your own Profile in Mahara: Part 2

This allows you to change font color. The drop-down box shows you a set of default colors to choose from and also allows you to choose More Colors... from a color picker, from a palette, or even by naming your color with a hexadecimal value.

 

Set up your own Profile in Mahara: Part 2

This drop-down box allows you to set a background color for your text entry. This can be useful for highlighting text or for making header titles, for example.

 

Set up your own Profile in Mahara: Part 2

This allows you to add a horizontal ruler to your text box. This can be a really useful way of splitting your text box up into separate sections.

 

Set up your own Profile in Mahara: Part 2

This allows you to add emoticons (more commonly known as "smileys") to your text area. You might be familiar with them from text messages or if you use an instant messenger. Click the button to view the 16 different emoticons you have to choose from. If you hover your mouse pointer over each icon you will be told in words what idea the individual emoticons are trying to express.

 

Set up your own Profile in Mahara: Part 2

Use this to add a table to your text box. You will see that the buttons to the right of this one become colorful once the table is select. Use these to edit the table as you would in a standard word processor.

 

Set up your own Profile in Mahara: Part 2

This button allows you to display online images in your text box.

 

 

Janet has decided on seeing these extra options that her text box needs an image to brighten it up. Let's finish the article by seeing how she can do this.

Time for action – adding an image to your text box

  1. Find an image on the Internet that you would like to add to your text box. Janet goes straight away to a free images site she knows called "Stock Exchange" at: http://www.sxc.hu. She enters the word ePortfolio into the search box and fi nds some suitable images. She chooses an image of a man jumping in the air with his portfolio in hand.

  2. Copy the link to the image. You can usually do this by right-clicking on the image and clicking Copy image location.
  3. Reopen the text box on your profile page that you made earlier and click the Insert/edit image icon.
  4. You will see a dialogue box pop up. In the Image URL field, paste the location of the image that you copied in step 2.
  5. Give your image a relevant Image description. This shows when you hover over the image with your mouse cursor.
  6. Select the Alignment, Dimensions, Border, and Vertical space / Horizontal space for your image.
  7. When you have finished, click Insert. This is how Janet configured her image.

  8. You may find that you chose the wrong dimensions for your image. Rather than going back into the image editor by clicking on the image itself and then clicking the Insert/edit image button again, you can resize the image in the text editor itself by clicking and dragging the corners to stretch it. Seeing her image on the page itself, Janet decided that she wanted it to be bigger.

What just happened?

We just saw how to add an image to a text box in Mahara.

Why not play around yourself with a few text boxes on your profile page? Have a go at inserting an image into the text box. When you feel you are finished, toggle out of full screen mode and don't forget to click the green button to save your changes when you have finished your editing.

Summary

We have learned some of the basics of Mahara. We specifically looked at setting up our own profile page and using the Mahara text editor.

Mahara 1.2 E-Portfolios: Beginner's Guide Create and host educational and professional e-portfolios and personalized learning communities
Published: February 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Derrin Michael Kent

Derrin Kent describes himself as a cross between a trainer, a manager, a linguist, and a geek. Managing Director of TDM (http://tdm.info), Derrin has a Master's level teaching qualification from the University of Cambridge (DTEFLA) and is also a Linux-Certified professional (LPIC). A jack-of-all-trades in open source software, Derrin has extensive Moodle experience (already a reviewer of two Packt books on Moodle) and speaks both Spanish and English at home with his Peruvian wife and two bilingual children.

Books From Packt

Spring Python 1.1
Spring Python 1.1

WordPress 2.8 Themes Cookbook
WordPress 2.8 Themes Cookbook

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

Django 1.1 Testing and Debugging
Django 1.1 Testing and Debugging

JavaFX 1.2 Application Development Cookbook
JavaFX 1.2 Application Development Cookbook

NHibernate 2.x Beginner's Guide
NHibernate 2.x Beginner's Guide

OpenX Ad Server: Beginner's Guide
OpenX Ad Server: Beginner's Guide

Plone 3.3 Multimedia
Plone 3.3 Multimedia

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software