13. Practical Application: Joomla! for Education

School Web sites present challenges that are often more complex than those for other kinds of organizations. Unlike a small business or nonprofit with a new Web site, a school starts with a ready-made target audience and most likely is not focused on expanding much beyond that audience. Schools have many different constituencies and a variety of communication needs. By following the same basic principles of planning as for all Web sites, an educational institution can create an effective communication portal that fits its needs.

Basic Planning of Educational Sites

The first objective of planning an education Web site should be deciding what type of site to create.

• Is it a site for a single school, a school with several campuses, or a school district?

• Who will the site users be?

• Who will be responsible for creating and maintaining the content of the site?

• Are there any regulatory mandates, governmental standards, or school policies that your site must meet?

When you start to think about your site, you should consider several different groups of potential users:

• Parents

• Students

• Teachers

• Other staff members

• Alumni

• The general public, including community members and families of potential students

• The news media

Consider what kind of information these groups want and need. Sometimes the information they want most may not be hard to provide. For example, the school calendar for the current year and the coming year (as soon as it is finalized) is something that all constituencies need for planning their own schedules for vacations and doctor’s appointments. People often want basic information such as key phone numbers. The general public may need to know the school’s address. The news media may want to know enrollment numbers or the name of the school mascot.

It is a good investment to spend some time asking potential users these questions:

• What are the three most common pieces of information that you need? What are the three pieces of information you get asked for most often? What one thing is it hardest for you to find information about?

• What information is the school communicating well right now?

• What are the three pieces of information that you think parents should have?

• What are the three most important pieces of information that the public should have?

• What kinds of misinformation do people have?

By taking the time to do this, you will have a good basis for setting priorities for your initial Web site and planning for future enhancements. When developing a plan, it is good to propose phases, both because it is more practical and because you are likely to receive many suggestions, not all of which are necessarily practical or useful for the majority of users.

Another set of questions you should explore is where people get their information now. Who is responsible for producing and keeping that information up-to-date? Will those people be active users of your Web site? If so, you should talk with them to understand their work processes and procedures. Find out what software they currently use and whether they are satisfied with it. Getting this group engaged early with your site design is a good way to help make sure your site actually ends up being used in the ways intended.

You must also consider who will be responsible for maintaining the site, both technically and in keeping the content up-to-date. If you create a site that is too complex for the time available for supporting it or for the skill level of the staff, it will end up being a frustrating site. Closely related to this is the question of who is going to be allowed to post content on the site and under what rules.

Extensions to Consider for Education

There are some basic extensions that we recommend installing even if you plan to keep your site fairly simple.

Basic Extensions

JCE

JCE, as mentioned in Chapter 6, is a good replacement for the editors that install with Joomla! We have found that with its many plugins, such as the File Manager, Media Manager, and Image Manager, users feel as if they are learning one integrated application rather than many separate ones. It is especially useful if you have users who will be uploading many PDF files, something that is common in schools. It also provides the ability to group users and set permissions and parameters for groups or individuals, allowing you to separate users and groups into their own folders. This allows you to keep your images directory organized and protects files from being altered or deleted inadvertently. JCE is actively developed and has a community forum for support.

Simple Image Rotator

The Simple Image Rotator module from JoomlaWorks provides an easy way to present a polished set of rotating images. Often schools use this type of module in the header of their sites, or they may use it in specific sections. The developer offers a community support forum.

Filtered News

Filtered News is a module that allows you to display linked lists of relevant articles to visitors to various sections of your site. For example, you may want to display news from just a particular grade in one area or just news about sports. The module has a number of configurable options for scrolling and image display. It also can be configured to dynamically adapt to display news relevant to the current section or category that is being browsed. The developer offers some documentation on his site with usage instructions.

Displaying Documents

Documents can be displayed and organized in a number of ways. For example, users can simply make links directly to the files from content items, create custom modules with lists of links to documents, or use a specific component that specializes in organizing and displaying documents.

Easy Folder Listing

Easy Folder Listing is a module that uses a simple way to display a list of all documents in a particular folder. When uploading files, if you keep them organized in folders, this will provide a nicely formatted display. You should be sure to use descriptive filenames and a module title that describes what the folders contain. You will need to create a separate copy of the module for each folder that you want to display.

An example of a useful way to use this extension is to insert the module into a content item using the loadposition plugin. For example, if you had a group of PDF lunch menus, you could load them to a folder called menus. Assign the module to the lunchmenus position (which is not a position in your template). Then in a content item called Lunch Menus, type the following:

{loadposition lunchmenus}

Make sure that the module is set to display either on all pages or on the menu link for the lunch menu page (the latter, although slightly more complicated, will make your site run faster). The developer offers documentation on installing and using the module on his Web site.

DOCman

DOCman is a full document repository and download component that can help organize and display most common formats of documents, audio files, and visual files. It also has built-in logging to track file statistics such as views and downloads, including tracking specific user information. A number of third-party extensions have been developed for DOCman. It has an active development team, as well as support and a community of users on its forum.

RokDownloads

RokDownloads is a component that provides a simple-to-use interface that allows you to manage your files and folders, publish them, and make files available to users to download. The development team is active and has a community forum for support.

Calendars

One of the most useful and flexible extension types for a school site is a calendar. From the basic school opening and closing schedule to listing sporting events and school board meetings, reserving space or equipment, and even lunch menus, a calendar system that is actively used can be very powerful. When choosing a calendar solution, keep the following things in mind:

• You should have the ability to have public and private events.

• You should be able to have multiple calendars managed by different people.

• Site users should be able to integrate the calendar into their own calendaring systems, such as those integrated into their e-mail systems, smartphones, or other devices.

JCal Pro

JCal Pro is a long-standing component calendaring solution that allows a number of advanced functions such as setting permissions for who can post events by access level, grouping events into categories, having recurring events, exporting to iCal, and others. It uses a templating system that allows for customization, and the developer offers template packs in a number of color schemes. JCal Pro also has the ability to use the content editor, allowing images and other media to be inserted into event details. JCal Pro is actively developed, has documentation on its use, and offers a support forum.

GCalendar

GCalendar is a component that integrates the Google calendar system. This can be extremely easy to use, especially if your school or district is set up on Google Apps. You can set up individual calendars for specific types of events or information purposes to display each calendar separately or display information from multiple calendars in one view.

Contact Information and Staff Pages

Joomla! comes with a basic contact form system that can be especially useful for general information e-mails. However, it is difficult to use if you want to provide contact information for a large number of users that is searchable and that provides flexible listings. In our experience, the simplest solution to this is to use the Community Builder extension with a number of specific Community Builder plugins.

Community Builder

Community Builder (CB) is a flexible extension that allows you to create membership and subscription community sites, as well as sites that need extended user profiles. It allows Web site administrators to extend user profiles to gather extended data on users as well as organize their users and user data in customized lists or groups. In terms of school sites, Community Builder really shines for its customizable user profiles and lists.

CB has a built-in system for its own plugins and comes with a number of plugins that are installed automatically. Examples of plugins for CB include templates that style your CB profile pages, content helpers such as the Author plugin that lists articles on a user’s profile, and languages that translate CB’s individual pages into other languages. Also included are plugins that integrate with other third-party extensions for Joomla! Some Community Builder plugins to consider installing yourself to expand its capabilities are covered in the following sections.

ProfileBook

ProfileBook is a Community Builder plugin that adds a configurable guestbooklike tab to a profile. The use for schools isn’t really as a guestbook where visitors can post, but it can be very easy for staff who are inexperienced computer users to use this plugin as an announcement board or lesson plan list. You can use multiple instances of this plugin to give you many different areas of text-based communications from the teacher’s profile to parents and students.

Gallery

CB Gallery is a simple-to-use image gallery plugin built specifically for Community Builder. Administrators can control the number and size of all images loaded, and it has a moderator function that allows all images to be screened for approval. This plugin is useful for teachers to show activities in their classes, field trips, or class projects. One thing to note for school settings where children are minors is that the school should get a consent form signed by parents to allow images of their child to be published.

Public Mail

Public Mail is a plugin that allows a small e-mail contact form to be placed on each staff member’s profile. It has a configurable option to track users sending e-mail through the form and can send a copy of the e-mail to the sender.

CB Captcha

CB Captcha puts a spam protection element into forms that are used in Community Builder, for example, the Public Mail form. Captcha protects forms from being used by computer-generated spammers, also called spambots. The aim is to make sure that a human being is filling out the form.

Community Builder’s lists have the functionality to generate member lists based on items in their profile, and it offers two ways to configure how Community Builder uses profile information to generate them. The first simple way is to select an individual profile field and create a list of people who are using that profile field. This works well when a profile field is one singular item. The other way to create a list is by using a specific query of the database. This is a good way to create a list that may have profile items that are multifaceted, such as multiselect. An example of this would be if a staff member worked at a number of campuses, but you want to create a list of staff by campus location.

Community Builder offers a subscription service to a very detailed manual for use, as well as a very large community forum based on user-to-user support and assistance.

Additional Tools

A number of additional tools are available for Joomla! that can enhance your education site by extending its functionality. They do require more time to implement, in large measure because you will need to train and support users.

LDAP Authentication

Many schools have existing intranets that their staff can access. If you already have a database of staff members stored in an LDAP system, using the LDAP Authentication plugin supplied with the Joomla! installation can be a good solution. We also recommend using Sam Moffatt’s Authentication Tools suite to help manage this.

Bulk Import of Users

Often you may have a spreadsheet or database listing of staff members, students, or parents whom you want to be registered users on your site. A few extensions to consider for this purpose are User Loader, userport, and JUpload.

Projectfork

Projectfork is a project management suite that is useful for collaboration and project organization. It is a very good extension to use if a group of users is working on a particular project. It has task tracking, time management, calendars, a file repository, and goal tracking built in. It provides a range of tools and has an easy-to-use interface. A number of extensions, as well as template themes, are available to make Projectfork more productive.

CiviCRM and CiviSchool

CiviCRM is a complete free and open source constituent management system aimed at the civic sphere that integrates with Joomla! It offers a set of tools specifically designed for schools, such as for managing after-school programs, applications, and health forms. CiviSchool is an emerging project but does have a large development and support community.

Multilingual Sites

Joomla! supports basic multilingual site natively, but a true multilingual site requires a great deal of work and planning. Creating a multilingual site is similar to creating two Web sites in that you generally want to manage the same content in two or more languages. If your school is already producing multilingual materials, you can incorporate them into your site by using a translation management system, or you can do it in a more limited way simply by having copies of already available multilingual documents presented in an organized fashion. The following are some multilanguage extensions to consider.

Josetta

Josetta is a commercial extension for translation management. It works by allowing you to make multiple versions of the same article and manage the translation process.

Automatic Translations

The Joomla! Extensions Directory offers a number of automatic translation tools. However, for a school site we recommend not using such a system because it can easily produce confusing and inaccurate translations. This is especially important for any documents that are official policy or legal in nature.

Learning Extensions

Joomla! is not designed as a full-featured learning management system (LMS), but there are several extensions that are useful for implementing some aspects of Web-based learning. For example, they may be useful for professional development and other staff training or for delivering some materials to students.

Joomlearn LMS

Joomlearn LMS is an extension that has both commercial and noncommercial versions that can be useful for this.

Moodle

If you want a full-fledged LMS, you may want to investigate using a separate application that can be integrated with your site. Moodle is perhaps the most popular open source LMS. It has a large number of users, including tens of thousands of teachers who are active community contributors. If you want to investigate a learning management system, it is well worth testing. Two free Joomla! extensions, Joomdle and JFusion, integrate Joomla! and Moodle and allow for single sign-on (instead of users needing two passwords and having to log in twice). Although they require some technical proficiency to implement, the results for users are very powerful.

Stand-Alone Applications

Although this book is about using Joomla!, there are other applications that are not Joomla! extensions but stand-alone products that you may want to consider for enhancing Web use in your school. Many of them can be integrated with your Joomla! site if desired.

Moodle

Moodle (described earlier) is open source course management software, which can also be referred to as a virtual learning environment application. Applications like this are very flexible in terms of creating online courses, tests, and team collaborations on work projects. Moodle is a very well-known open source project with a well-developed community supporting it. A number of instructional books are available on how to implement and use it.

Google Apps

Google Apps is a suite of online applications, including documents, spreadsheets, presentations, e-mail, and calendar applications among other items. K-12 schools can receive a free enterprise version. The advantage of this is that they display with your domain rather than the Google domain to restrict access to people with accounts on your domain. It is also a relatively easy way to provide e-mail accounts to students, teachers, or parents if that is something that you want to do. Although anyone can also create individual Google accounts and access these services, having an official installation can provide a number of advantages, including better access control.

Many Joomla! extensions integrate specific elements of Google Apps with your site. You can also create a single sign-on system to integrate your Joomla! site and Google Apps.

Blogging Applications

There may be teachers who want to have students publish their work on the Web. Although it is possible to do this within your Joomla! site, it is also possible using Web services that provide free, easy-to-create, easy-to-close accounts in a hosted environment. Two such services are Blogger.com and WordPress.com. For example, on Blogger.com, a teacher can set up a blog and have up to 100 authors contribute. Access to the blog can also be restricted. We suggest that you provide a set of policies for use of such systems, especially by students younger than 13.

Social Networking Sites

It may be useful for your school or district to have a presence on Facebook, Twitter, and other social sites. The most important purpose of this presence is to provide an easy way to notify users of these sites about important news coming from your site. For example, if you post a news item saying that school is going to be closed because of a weather-related issue, you can use a Joomla! extension to send notices of this to your Facebook friends or Twitter followers. We do not recommend that schools enable unmoderated two-way communication through these sites, since there is much potential for mischief with postings. Some useful extensions for these purposes are discussed in Chapter 9.

Accessibility

Schools have a vital stake in making sure that resources are available to all in an equitable manner.

Your school or school district probably already has a staff person or a whole office devoted to accessibility and complying with the Americans with Disabilities Act, Individuals with Disabilities Education Improvement Act of 2004, Section 508, and other regulations and standards. There is also likely to be another person or office that handles issues related to students with limited English proficiency and their families. If you incorporate people in these roles into your Web planning team, you will make a better, more useful Web site for everyone.

Joomla! can be used to create sites that meet all accessibility guidelines if you understand and implement the basic principles of accessible design. Joomla! can also be used to create multilingual sites if you want to present information in several languages.

The most important element in producing a Joomla! Web site that is accessible to all users is the design of its template. Fortunately, both the Joomla! 2.5 and Joomla! 3 distributions include Beez, which is a template designed to meet accessibility standards. If you are purchasing a stock template, accessibility is an issue that you should ask the seller about. Asking whether a template is Section 508 compliant is a good way to get specific information. If you are having a custom template designed, you should include Section 508 compliance as part of the project description.

School Web Site Demo

Just like schools, school Web sites vary widely. For this example we are creating a site for a high school, but you may be working on a site for a nursery school, elementary school, or college. Some of the audiences for the school are parents, teachers, students, and the public.

It is tempting to overcomplicate a site, but in this case we decided that parents and students would not need to log in to find classroom information and news. It is important to consider that managing passwords for a large number of parents and students would add greatly to the complexity of site management. This means that members of the public will also be able to see the pages and use contact information.

In this model, all school staff will have accounts on the site. Each department will have a category, and staff members from the department will be able to write articles for publication in that category. In addition, each staff member will have a contact page on which he or she will be able to post information items and images. What these are will be up to the staff member in line with school and department policies.

Navigation will consist of one main menu and submenus using the techniques described in Chapter 9.

Creating a School or Education Site

The main goal of this example is to create a relatively simple site that can be expanded upon if the school has staff or volunteers with the time and willingness to commit to managing it. While there are some differences between Joomla! 2.5 and Joomla! 3, most of them will not impact the process of creating a school site. The main difference will be that the default templates are different and the screen shots we show will differ in design but not functionality. Unless the difference is important, we will show images for Joomla! 2.5. Because accessibility is important for school sites, we will use the Beez templates, specifically Beez_20 for Joomla! 2.5 and Beez3 for Joomla! 3.

To begin constructing the site, install Joomla! without the sample data. Go to the Template Manager, Templates tab. For Joomla! 2.5 open the Beez2 template and copy it to beez2school. For Joomla! 3, open the Beez3 default template and copy it to beez3school. In the Template Styles Manager make the default template style of your new template the default template for your site.

It will look like what is shown in Figure 13.1. Later we will modify the templates, but first we’ll set up the structure for the site.

Figure 13.1. A Joomla! new installation without sample data for (A) Joomla! 2.5 using the Beez_20 template and (B) Joomla! 3 using the Beez3 template

Logging in to the back end of the site, we see the Joomla! administrator layout. This layout is shown in Figure 13.2.

Figure 13.2. The Joomla! 2.5 administrator home page

One of the most powerful features of Joomla! is that it can be used to create infinitely deep nested categories. This is extremely useful for the school site. We start by making categories for articles. Going to the Content menu and selecting Categories, we can see that one category already exists, Uncategorised (shown in Figure 13.3). Clicking on its name or selecting the check box and clicking on the Edit icon opens the category editor. Change the name to Landing Pages, delete the alias, and save (Figure 13.4). We will use this category for all of the basic Web site pages that will rarely change, such as the welcome page.

Figure 13.3. The Uncategorised category displayed in the Category Manager

Figure 13.4. When renaming the Uncategorised category to Landing Pages, change the title and make the alias blank so that a new one is generated.

Next, we click the New icon and create a new category called Departments. All we need to do is enter the title because this is a “root” category that has no parent. We then put some general introductory text in the description, as shown in Figure 13.5.

Figure 13.5. Creating a new category called Departments

Next, we create a subcategory for each department: Administration, English, Mathematics, Science, Social Studies, Foreign Languages, Arts, Athletics and Physical Education, and Library. To do this, we click New and enter the title, but this time we select Departments as the parent (as shown in Figure 13.6). We add text to the description for each department. To save some time, we use the Save & New icon to let us create many departments (Figure 13.7).

Figure 13.6. Creating a category for the Science Department

Figure 13.7. Article-editing toolbar showing the Save & New icon

The list of categories now shows the new categories and their relationship to the Departments category, as in Figure 13.8.

Figure 13.8. The updated list of categories, showing subcategories

Next, we make a News category for each department (each department being a parent to a category called News; see Figure 13.9).

Figure 13.9. A three-level category branch for the Science Department

After making the first News category, we can make this task easier by using the category copy feature at the bottom of the screen. We check the box next to the News category and then at the bottom select another department (for example, Administration) as the Category for Move/Copy as shown in Figure 13.10. We select the Copy radio button and then click the Process button, repeating until all of the departments have News categories. We could add other categories now or later if desired.

Figure 13.10. Using the bulk copy form to make copies of a category

Next, we make a menu link from the main menu to Departments with an Articles Category list. Pick the category Departments. On the right in the Category Options slider, we set the following options:

• Category Title: Show (so it will be displayed)

• Category Description: Show (so it will be displayed)

• Subcategory Levels: 1 so that the list of departments—the first level of categories under the Departments parent—will be displayed

• Empty Categories: Show (so that it displays even if a department has not posted any articles)

• No Articles Message: Hide (because this is not relevant here)

• Subcategories Descriptions: Hide (because we want a simple list of names)

• #Articles in Category: Hide (because it is not useful information here)

Visiting the front end of the site and clicking on the Departments link, we now see the display shown in Figure 13.11.

Figure 13.11. The front-end view of the Departments page as linked from the main menu

Next, we create an article called “A Place for Learning” in the Landing Pages category that will serve as the home page. As shown in Figure 13.12, we change the home page menu link to this page and leave it as the default page.

Figure 13.12. Editing the default menu link

At this point we go to the Module Manager and change the position of the main menu to 1 by clicking the Position button and finding the desired position on the list (Figure 13.13). (See Chapter 7 for how to find template positions in Joomla!) Because we are going to use only the top-level menu links (and not submenus) in this display, under Basic Options we set both the Start Level and the End Level to 1 (shown in Figure 13.14). This produces a front page that looks like Figure 13.15.

Figure 13.13. Position assignment in the Main Menu module

Figure 13.14. Setting the Start Level and End Level for the Main Menu module

Figure 13.15. Display of the home page with the Main Menu module in position-1

We will use a split menu (see Chapter 9) for the departments, so we add a submenu link to the top menu under Departments for each department and then one for News under each department. You can use the Save & New icon to make this a little quicker. The structure is as shown in Figure 13.16.

Figure 13.16. Menu items in the main menu with News submenu items for each department

Next, we create a new Menu module in the Module Manager with the title Departments and assign it to position-7 (the left column) in the template. These settings are shown in Figure 13.17. Figure 13.18 shows the Basic Options selections available when editing the module. We set that menu to start at Level 2 and end with 3 but leave “Show Sub-menu items” set to No. With these settings the departmental News links in the menu are shown only when the user has already clicked on the department links.

Figure 13.17. The Departments submenu assigned to position-7

Because we want the Departments menu to display only when the user has clicked on the Department link or is already on a Department page, we change the menu assignments, located on the lower left of the module edit screen. Instead of All Pages, we choose Only the Pages Selected from the drop-down menu. Then we make sure that the check box next to Home is not selected but that Departments and all of the department and department News submenu items are selected, as shown in Figure 13.19.

Figure 13.18. The Start Level and End Level for the Departments Menu module

Figure 13.19. Selecting the menu links to display the Departments menu whenever the Departments item or any submenu items in the Departments branch are clicked

If you click on the Departments link on the top menu, the site now looks like Figure 13.20.

Figure 13.20. The front-end display of the Departments submenu

To finish our department structure we also create a category in com_contact called Departments and then within that create a general contact page for each department. This can include the location of the department offices, phone numbers, a general e-mail contact form, and other relevant information as desired. We then add a link to each department’s contact form on its submenu, as shown in Figure 13.21. Linking on a department’s name now displays as shown in Figure 13.22.

Figure 13.21. Contacts for each department are added to the submenus.

Next, we create a Lunch Menu page. There are many possible ways to do this, but much probably depends on how the production of lunch menus is currently handled. In our case we assume that lunch menus are available in PDF format, so we use a module, Easy Folder Listing, that displays all files stored in a specific folder. In this case we make a folder called lunchmenus in the Media Manager for this purpose (as shown in Figure 13.23). We create one instance of this module and place it in a special position name called lunchmenus in the Module Manager, as shown in Figure 13.24.

Figure 13.22. The appearance of the Science submenu with News and Contact links

Figure 13.23. The lunchmenus folder containing three PDF files, each showing lunch menus for a month

Figure 13.24. Easy Folder Listing module in the lunchmenus position

Next, we create a single article in the Landing Pages category called “Lunch Menus.” In that article we use the loadposition plugin to load the lunchmenus module:

{loadposition lunchmenus}

At this point we also add a login link to the top menu for teachers and others to log in, because we assume that they will be creating content from the front end of the site (see Figure 13.25). That lets us unpublish the Login module.

Figure 13.25. Front-end display of the links to the lunch menu PDFs in the Easy Folder Listing module

Finally, we want to build a staff directory that would give teachers a place to serve as a “home page” where students and parents can find information about them. To do this we use the Contact component. We create a category called Teachers and Staff in the Contact Category Manager.

Prior to creating any contact pages we do two things. First, we enable the Contact Creator plugin in the Plugin Manager. This will create a contact for every user that we create. So when a user is created for a teacher, he or she is automatically given a contact record. We then enable the Profile plugin, which allows the use of extra fields in displaying either the user record or (optionally) the contact form. Working together, these two plugins enable us to have a fairly flexible staff home page system.

To configure the Contact Creator we choose the settings shown in Figure 13.26. These settings mean that the contacts will automatically be placed in the Teachers and Staff category and automatically published.

Figure 13.26. Setting the default category for new contacts in the Contact Creator plugin

Now if we create a user with username janesmith, the contact record shown in Figure 13.27 is automatically generated.

Figure 13.27. Contact record created with the Contact Creator plugin

The Profile plugin is used to add extra fields to the profile. It is highly flexible and customizable, but in our case we simply change the default configurations by setting Date of Birth and Terms of Service to Disabled and leaving everything else as Optional in the “User profile fields for profile edit form” area of the edit screen (on the lower right), as shown in Figure 13.28.

Figure 13.28. Setting the options for the Profile plugin

Then we create a user record for each staff member. We also create a Teacher user group. In this case we have just three for illustrative purposes. Next, we make a menu link from the main menu to the category list for the Teachers and Staff contacts. (We choose to display just the title and the phone number; these options as usual are set in the menu link.) This gives us a simple directory, as shown in Figure 13.29.

Figure 13.29. The staff directory created using a Category List link for contacts

Next, we configure the display for contacts. We want to have an e-mail form, so we choose to display that, and we want teachers to have the ability to show homework, class news, and images.

There are many ways that this could be designed using the ACL system in Joomla! In our case we choose a relatively simple approach. First, we create an article category called Homework where all teachers can post homework and another called Class News where teachers can post other news. Then in the contact page we enable the Show Articles option that displays all the articles by a user in his or her contact page. So although all of the items are in the same two categories, each teacher’s items are displayed separately.

We also want a way for teachers to be able to customize their own pages, so we enable display of the user profile on the contact page. Because the profile can be edited by the teachers directly, they have the flexibility to add what they would like to the page, within whatever parameters are set by the site administrator.

To manage all of this we create a menu that will be available only to logged-in users who have permission to create articles. In this we include a link to submit an article and a link to edit the user’s own profile. When a user logs in and clicks the Edit Profile link, the form will now contain the new options in addition to the usual username and password. The new options will look as shown in Figure 13.30 (in which the teacher has filled in some information).

Figure 13.30. Editing a user profile in the front end

We also configure the Contact component to show both the contact’s articles and the profile when displayed by going to the Contact Manager, clicking on the Options icon, and changing the settings to those shown in Figure 13.31.

Figure 13.31. Configuring the Contact display to show user articles and profile

The individual contact display is available in three display formats: Sliders, Tabs, and Plain. This can be set globally, in the menu item, or individually. We set it in the menu item in the Contact Display Options slider. Figure 13.32 shows the Tabs option selected. Figure 13.33 shows the display of the teacher’s contact page with the Profile tab selected.

Figure 13.32. Configuring the Contact Display Options to use tabs

Figure 13.33. Teacher contact page

A final issue is to allow teachers who want to display images an easy way to do this. At present there are a limited number of extensions available for this purpose. We installed an extension called JEPUM, which is somewhat more complicated to install for the site manager but makes it much simpler for the site’s users. The JEPUM extension provides an easy way to upload images to the Media Manager from the desktop using “drag and drop.” Installing it on your site works in the same way as installing any other extension. However, a second application (included with the extension) must be installed on the user’s computer (both Windows and Mac applications are offered). This works best by creating a separate folder for each user in the images folder. However, only the paid version of the extension allows automatic navigation to this folder. If you use the free version, each user will have to navigate to his or her folder. Then each user’s local computer is configured with his or her username and password (and for the paid version the name of the folder to which that user is assigned). Configuration for the images folder is shown in Figure 13.34. Once this extension is installed, the user can easily move images from the desktop to the directory, as shown in Figures 13.35 and 13.36.

Figure 13.34. Configuration of the images folder for JEPUM

Figure 13.35. The JEPUM desktop view (Windows) of the Media Manager

Figure 13.36. Images can be dragged and dropped from the desktop to the correct images folder on the site.

Images can be displayed by creating a single article for each user and putting an instance of the Very Simple Image Gallery plugin on that page. The gallery will refer to that user’s folder. For example:

{vsig}janesmith{/vsig}

would set up Jane Smith’s image gallery. (See Chapter 11 for details on using Very Simple Image Gallery.)

This page can be linked from the Contact layout (for example, by putting it in the Web site link fields). As for the nonprofit site, we use the GCalendar extension to provide a calendar.

Changing the Template

You should have made a copy of the appropriate template (Beez2 for Joomla! 2.5 and Beez5 for Joomla! 3) already. If you have not, please do so now.

Common Changes

Open the default template style for the copy of the template. Select a new logo for your site using the Select button next to the Logo field and upload a new image. We make “Our High School” the site title and “A sample site” the description (see Figure 13.37). This gives us a site that looks like Figure 13.38.

Figure 13.37. Selecting options in the Beez2 template style for the site

Figure 13.38. Site with initial changes to the template

Next, we want to customize the template.

In the template parameters shown previously there was an option called Template Colour, which had a choice of Personal (which is the default) and Nature. In Joomla! 3 there are additional color options. We decide to customize using the Personal color scheme. If we go to the Templates tab and click on the Details link for our template, the list of style sheets on the right now includes the backup file, as shown in Figure 13.39 (the list is slightly different in Joomla! 3).

Figure 13.39. Beez_20 files

By clicking on the personal.css file, we can modify the design. As a first step, we comment out line 97 and add a 2px solid border at the bottom of the header in #00400 so that .logoheader is as shown here:

.logoheader
{
/* background: #0c1a3e URL (../images/personal/personal2.png) no-repeat bottom
right ; */
color:#004000;
min-height:200px;
margin:0em 10px 0 10px !important;
border-bottom:2px;
border-color:#004000;
}

We also make the following color changes to the file:

• Change all instances of #095197 to #004000.

• Change #0d4c89 to #00400.

• Change #555 to #004000.

• Find #logo span (around line 83) and change color #fff; to color #004000;.

These changes yield a simple monochromatic design that will work with a variety of images and uses. The home page for the final site appears as in Figure 13.40. When you have finished making changes to the personal.css file, return to your File Manager and make a backup copy, for example, personalbackup.css, to protect your work in case the personal.css file is ever updated.

Figure 13.40. School site with customized Beez3 template

Joomla! 3

For Joomla! 3 we need to do some additional work. At this point the site looks as in Figure 13.41, which is slightly different from what you see in Figure 13.40.

Figure 13.41. School site in Joomla! 3 with customized Beez5 template

There are various ways to change this. We decided to leave this layout but to use the space to the right of the logo for either messages or important news as shown in Figure 13.42. First we added a green background to the area under the menu by adding a background color to the logoheader class:

.logoheader
{
/*  background:  #0c1a3e  URL(../images/personal/personal2.png) no-repeat bottom
right ;
  color:#fff; */
        color: #004000
  min-height:200px;
  margin:0em 10px 0 10px !important;
        border-bottom:2px;
        border-color: #004000;
        background-color: #004000;
}

Figure 13.42. School site in Joomla! 3 with customized Beez5 template and space used for announcements or images

Then in index.php we added a new module position right after </span></h1> (about line 116):

<div class="infomodule">
<jdoc:include type="modules" name="position-new" />
</div>

To personal.css we added this styling:

.infomodule {
float:right;
}

A copy of each of the template modifications is available for download and examination at http://officialjoomlabook.com.

Phase 2: Adding Projectfork

Once you have a Web site for your school, there are many additional extensions that you may want to install to enhance your site in various ways. For example, you may want to manage mailing lists, enrollment in after-school programs, and appointments for parent-teacher conferences or carry out a variety of other functions. We urge you to add these slowly and with a good deal of thought about both the maintenance they will require and how much use they will actually get.

One extension you may want to add is Projectfork, which is used for project management. This can be useful simply for your Web site team (even if it is a one-person “team”), but it is potentially very helpful for administrators and teachers, a parent-teacher association, and even students engaged in collaborative projects.

First, download and install Projectfork.

Once it is installed, it may look a bit overwhelming, but it is designed like a standard project management system. For example, you can create a new project (our example will be Science Fair). Then you add people and tasks to that project using the appropriate tabs and buttons. For example, the Science Fair project might include tasks such as

• Meet with all science teachers.

• Reserve space.

• Get judges.

• Write the rules for projects.

• Decide on prizes.

• Recruit parent volunteers for the day of the event.

• Set up.

• Clean up.

Figure 13.43 shows one back-end view of Projectfork (the Task page for the Science Fair project).

Figure 13.43. The Task page for the Science Fair project

One or more people can be assigned to each task, the tasks can have deadlines, and there can be discussions and documents attached to each task. All of these features can be managed from the back end of Joomla! but also can be managed from the front end. This means you do not have to give the users back-end access to your site. You can enable this by adding a Projectfork menu link to your user menu and limiting visibility to those groups whom you wish to allow to use it. Users will be able to see only those projects of which they are members unless a project has been made public. This makes it an extremely powerful and useful system for organizations like schools which may have many groups working on confidential projects or have students, parents, and administrators using the same system. Figure 13.44 shows a front-end view.

Figure 13.44. The Projectfork dashboard as seen from the front end of the Web site

Overall, use of Projectfork and other complex extensions requires some investment of time and energy to learn and to train your users. However, once the users learn the system, these extensions can be extremely powerful and make your Web site even more useful for your school community.

Conclusion

Joomla! is a strong solution for school Web sites. Starting with a basic informational site, you can progressively enhance the information offered and the interactivity of the site. Developed effectively, your Joomla! Web site can help engage parents, teachers, students, and community members in learning and support of students.

Note: If any extensions or templates used in this example site are unavailable for your version of Joomla! please visit http://officialjoomlabook.com to obtain them.