How-To Tutorials - Web Development

Download code from here (Read more interesting articles on Plone here.) Examining themes in the Zope Management Interface Now that we have seen in part how themes work, let us take a closer look at their representation in Zope Object Database (ZODB). Browse to http://localhost:8080/Plone. Click on Site Setup Zope Management Interface| and you should see: This is a Through the Web (TTW) representation of all the objects in the database at the Plone site level (the application root is one level above). The most frequently used theme-related objects here are: portal_css portal_javascripts portal_skins portal_view_customizations Of these, portal_css and portal_javascripts are most often used to enable their respective debug modes, wherein the CSS and JavaScript files are not compiled into a single file (not to be confused with Zope 2's debug mode which detects filesystem changes in real time when enabled). Take a look at your site with Firebug, in particular the style tab. You should see: Now enable debug mode in portal_javascripts and look again. You should see: When portal_css debug mode is enabled, we can see (or by viewing the HTML source) that the CSS files are loaded individually in Firebug. The same applies to portal_javascripts debug mode. This can be absolutely invaluable when trying to correlate various visual elements with their respective sources. In addition to debug mode, you can also add CSS/JavaScript files to their respective registries through the Web, which brings us to the next topic.

Installing themes with Buildout For a lot of website projects, a theme downloaded from plone.org (http://plone.org/products) or the Python Package Index (http://pypi.python.org) is enough to launch a professional-looking site. If your project falls into this category, or if you just want to experiment, follow the steps in this chapter. Searching for themes on plone.org We will need to find a theme we like. We can do that by browsing to http://plone.org. Next, click on Downloads Add-on Product Releases | Themes|. You should see (result similar to): Click on a theme to view a screenshot and select one you like, for example beyondskins.ploneday.site2010, and add the package to your buildout.cfg file. Adding themes with Buildout In 03-appearance-wpd2010.cfg, we extend the last known working configuration file from Chapter 2, that is 02-site-basics-blog.cfg. It looks like this: [buildout]extends = 02-site-basics-blog.cfg[instance]eggs += beyondskins.ploneday.site2010zcml += beyondskins.ploneday.site2010 In addition to adding the package name to the eggs parameter, we must add it to the zcml parameter as well. Now stop Plone (with Ctrl + C or Ctrl +Z/Enter) and run: $ bin/buildout -c 03-appearance.cfgUpdating zope2.Updating fake eggsUpdating instance.Getting distribution for 'beyondskins.ploneday.site2010'.Got beyondskins.ploneday.site2010 1.0.3. Now start Plone: $ bin/instance fg Installing themes in Plone Browse to http://localhost:8080/Plone. Now, click on Site Setup Add/Remove Products| and you should see: Check the box next to WorldPloneDay: Theme for 2010 edition 1.0.3 and click on Install. Now browse to http://localhost:8080/Plone and you should see: This theme is the courtesy of Simples Consultoria (http://www.simplesconsultoria.com.br/). Thank you! You can examine the anonymous view (what everyone else sees) by loading http://127.0.0.1:8080/Plone in your browser (that is. by using the IP address instead of the hostname). You can also load either of these URLs (http://127.0.0.1:8080/Plone or http://localhost:8080/Plone) from another web browser (besides the one you are currently using) to see the anonymous view (for example, Safari or Internet Explorer, instead of Firefox). To display the blog entry to the public, we have transitioned the other objects in the site root to the private state. Examining themes with Omelette and Python Simply put, a theme is a collection of templates, images, CSS, JavaScript, and other files (such as Python scripts) that control the appearance of your site. Typically these files are packaged into a Python package, installed in your Plone site with the help of Buildout, and installed in Plone via the Add/Remove Products configlet in Site Setup. Once installed, certain elements of the theme can be edited through the Web using the ZMI. However, these changes only exist in the site's database. Currently there is no easy way to transfer changes made through the Web from the database to the filesystem; so there is a trade-off for performing such customizations through the Web. If you lose your database, you lose your customizations. Depending on your goals, it may not be entirely undesirable to store customizations in your database. But nowadays, most folks choose to separate their site's logical elements (for example themes, add-on functionality, and so on) from their site's content (that is data). Creating a filesystem theme and resisting the urge to customize it through the Web accomplishes this goal. Otherwise, if you are going to customize your theme through the Web, consider these changes volatile, and subject to loss.

(Read more interesting articles on Plone here.) Download code from here Creating a theme package with ZopeSkel Now that we have examined someone else's theme, let us try creating our own. Remember, we will not cover theme creation in depth; this is only a sample for site administrators (who may or may not be required to develop themes, in addition to managing their site). For more information about creating themes, Visit: http://plone.org/documentation/kb/how-to-create-a-plone-3-theme-product-on-thefilesystem. To create a theme, we will use the ZopeSkel tool (http://pypi.python.org/pypi/ZopeSkel) to generate some of the boilerplate code. ZopeSkel uses PasteScript (http://pypi.python.org/pypi/PasteScript) to facilitate package generation using a set of templates. Other options include: Write everything by hand from memory Copy the contents of another theme package Use another tool such as ArchGenXML to generate boilerplate code (http://plone.org/products/archgenxml) Adding ZopeSkel to a buildout Now let's add ZopeSkel to our buildout. In 03-appearance-zopeskel.cfg, we have this: [buildout] extends = 03-appearance-zopepy.cfg parts += zopeskel [zopeskel] recipe = zc.recipe.egg dependent-scripts = true We extend the previous working configuration file, and add a new section called zopeskel. This section uses the zc.recipe.egg recipe (http://pypi.python.org/pypi/zc.recipe.egg) to download ZopeSkel from the Python Package Index (zc.recipe.egg will search the Python Package Index for packages that match the section name zopeskel). We set dependent-scripts to true, to tell Buildout to generate Python scripts for ZopeSkel's dependencies such as PasteScript, which includes the paster script. Now stop Plone (with Ctrl + C or Ctrl + Z/Enter) and run Buildout: $ bin/buildout -c 03-appearance-zopeskel.cfg You should see: $ bin/buildout -c 03-appearance-zopeskel.cfg Uninstalling plonesite. Updating zope2. Updating fake eggs Updating instance. Installing plonesite. … Updating zopepy. Installing zopeskel. Getting distribution for 'zopeskel'. Got ZopeSkel 2.16. Getting distribution for 'Cheetah>1.0,<=2.2.1'. … Got Cheetah 2.2.1. Getting distribution for 'PasteScript'. Got PasteScript 1.7.3. Getting distribution for 'PasteDeploy'. … Got PasteDeploy 1.3.3. Getting distribution for 'Paste>=1.3'. … Got Paste 1.7.3.1. Generated script '/Users/aclark/Developer/plone-site-admin/ buildout/bin/ zopeskel'. Generated script '/Users/aclark/Developer/plone-site-admin/ buildout/bin/ paster'. Generated script '/Users/aclark/Developer/plone-site-admin/ buildout/bin/ easy_install'. Generated script '/Users/aclark/Developer/plone-site-admin/ buildout/bin/ easy_install-2.4'. You will notice that in addition to bin/zopeskel, Buildout also installed the "dependent scripts" bin/paster and bin/easy_install (the latter of which we do not really need in this case). Running ZopeSkel Now try running ZopeSkel with the command: $ bin/zopeskel You should see: Usage: zopeskel <template> <output-name> [var1=value] ... [varN=value] zopeskel --help Full help zopeskel --list List template verbosely, with details zopeskel --make-config-file Output .zopeskel prefs file ... This tells us we need to pick a template and output-name. ZopeSkel goes on to list the available templates. They are: archetype: A Plone project that uses Archetypes content types kss_plugin: A project for a KSS plugin plone: A project for Plone products plone2_theme: A theme for Plone 2.1 plone3_portlet: A Plone 3 portlet plone_app: A project for Plone products with a nested namespace plone_pas: A project for a Plone PAS plugin plone2.5_theme: A theme for Plone 2.5 plone3_theme: A theme for Plone 3 plone2.5_buildout: A buildout for Plone 2.5 projects plone3_buildout: A buildout for Plone 3 installation plone_hosting: Plone hosting: buildout with ZEO and Plone recipe: A recipe project for zc.buildout silva_buildout: A buildout for Silva projects basic_namespace: A basic Python project with a namespace package nested_namespace: A basic Python project with a nested basic_zope: A Zope project<

The first thing that you should always do before making any changes is take a backup of your site. You can do this manually or by using an extension like Akeeba backup, which can be found in the JED or at the following link: http://extensions.joomla.org/extensions/access-a-security/backup/1606 Having a backup copy is essential to restore a working copy of our site if a mistake is made. Also, you may be wondering whether, later, if you install a newer version of the extension, you may lose all of the changes made. This can happen; therefore, we have made these modifications after we have finished installing the extensions we need. But don't worry too much about that. You won't be installing a newer version of an extension every day. Mostly, you will install a newer version of the extension if bugs have been found or if the version introduces some features you want. Otherwise, if the site is working nicely and there are no bugs or newer features, we don't need to update these extensions. Anyway, the most important thing to remember is to backup. Always keep a backup of your work. As mentioned earlier, each one of the extensions that we are using is loading its own jQuery library, and thus makes our site needlessly load the library many times. This makes our site download more files than are really necessary. Just take a look at the source code of your site. In the head section we can see the script tags that are loading the required libraries: <script type="text/javascript" src="/plugins/system/cdscriptegrator/libraries/jquery /js/jsloader.php?files[]=jquery-latest.packed.js&amp;files[]= jquery-noconflict.js"></script> <script type="text/javascript" src="/plugins/system/cdscriptegrator/libraries/jquery/ js/ui/jsloader.php?file=ui.core"></script> <script type="text/javascript" src="/plugins/system/scjquery/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/plugins/system/scjquery/js/jquery.no.conflict.js"></script> <script type="text/javascript" src="/plugins/system/scjquery/js/ jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="/media/system/js/mootools.js"></script> <script type="text/javascript" src="/media/system/js/caption.js"></script> <script type="text/javascript" src="/plugins/content/ppgallery/res/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="/plugins/content/ppgallery/res/jquery.prettyPhoto.js" charset="utf-8"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_ninja_shadowbox/ninja_shadowbox/js/adapter/ shadowbox-jquery.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_ninja_shadowbox/ninja_shadowbox/js/shadowbox.js"></script> <script type="text/javascript" src="/modules/mod_ajaxsearch/js/script.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_superfishmenu/tmpl/js/jquery.event.hover.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_superfishmenu/tmpl/js/superfish.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_c7dialogmod/jquery/ui.core.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_c7dialogmod/jquery/ui.dialog.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_c7dialogmod/jquery/ui.draggable.js"></script> <script type="text/javascript" src="http://wayofthewebninja.com/modules/ mod_c7dialogmod/jquery/ui.resizable.js"></script> Here we can see that lots of JavaScript files are being loaded, and some of them are repeated. Surely, that doesn't make our site load faster. Let's try to improve this as much as we can. We will use the SC jQuery plugin in order to load the jQuery library. With the help of a variable created by this library we can also determine if the jQuery library needs to be loaded or not. How is this done? If we open the plugins/system/scjquery.php file, at the very bottom of the file you can see the following code: $app->set( 'jquery', true ); In newer versions of the plugin this line of code seems to have been removed. However we can modify the plugins/system/scjquery.php file and add that line to it, at the very bottom, just like this: ... $app->set( ‘jquery’, true ); $doc->setHeadData($headData); return true; } } This way we will be able to use the techniques we are about to show.   This will set a variable jquery with the value true. Our next step is to use this variable to our benefit, just like we did in the ajaxSearch module. Open the modules/mod_ajaxsearch/mod_ajaxsearch.php file. We modified this file and it now appears as follows: $app =& JFactory::getApplication(); if( !$app->get('jquery') ){ $document->addscript(JURI::root(true).'modules'.DS. 'mod_ajaxsearch'.DS.'js'.DS.'jquery-1.3.2.min.js'); } First we need to get an instance of the global application object. We will then use the get method to try and read the 'jquery' variable. If this variable doesn't exist, it would mean that the SC jQuery plugin has not been loaded, and thus the jQuery library won't be present. If this happens, we will let the module load its own copy of the library. This helps us in reducing the number of times the library has been loaded. Now we are going to look into the other extensions that we used, seeing how we can solve each situation. Code highlight Remember the Core Design Chili Code plugin extension? We used it to reformat some code, as we can see in the next image: This plugin required the jQuery library, but as the plugin itself doesn't have the library included, another plugin from the same developers was needed—the Core Design Scriptegrator plugin. You can check it in Extensions | Plugin Manager: This plugins works much like the SC jQuery plugin, but for the extensions of the Core Design Chili Code plugin developers. This plugin loads the jQuery library, and some others that we don't need, in order for the other extensions to use it. As we are using the SC jQuery plugin, we can disable the Scriptegrator plugin: But hey, then the Core Design Chili Code plugin stops working. Why? We have said that the Chili Code plugin needs the jQuery library, but we are using the SC jQuery plugin to provide it. At this point we need to check the Chili Code plugin source code, so just open plugins/content/cdchilicode.php. Here we can see the following piece of code: // define language if (!defined('_JSCRIPTEGRATOR')) { Error::raiseNotice('', JText::_('CHILICODE_ENABLE_SCRIPTEGRATOR')); return; } // require Scriptegrator version 1.3.4 or higher $version = '1.3.4'; if (!JScriptegrator::versionRequire($version)) { JError::raiseNotice('', JText::sprintf('CHILICODE_SCRIPTEGRATOR_REQUIREVERSION', $version)); return; } if (!JScriptegrator::checkLibrary('jquery', 'site')) { JError::raiseNotice('', JText::_('CHILICODE_MISSING_JQUERY')); return; } What does all this code do? It checks for the Core Design Scriptegrator plugin. If it doesn't find any evidence of the plugin, it raises some errors and returns. We know that jQuery will be loaded. So we can comment the code mentioned, and the Chili Code plugin will work again. That's it; we have just reduced one jQuery library load; ready for the next one?

(For more resources on PrestaShop 1.3, see here.) The most basic level is using the back office panel to customize the layout. Using this knowledge, we can make some quick and easy changes without having any technical knowledge. If you need more advanced changes than what can be achieved here, you will need to edit the theme and the CSS files, which will be explained in the next article on Customizing PrestaShop Theme Part 2. It must be noted that all design changes that you can do in this back office can also be achieved through customization on the theme files (which involves editing of the file's markup) too. Although knowledge of this theme editing approach encased that of the back office setting, it is useful to know that there are reasons to choose the latter option with no "hacking" of scripts even if you are an advanced user as there could be some issues when you have to update to the next PrestaShop version. You will have to update some of these modified files as these changes may not be automatically included in the newer version. We have to decide what kind of layout we would want, just like the interior design space of a building that you are erecting, you need to visualize the spaces and how users will navigate your retail outlet. You will also need to know what kind of resources can help the successful function of your store, customers in real brick-and-mortar stores do not have to ask a lot of questions as they are prone to browsing the items while having the advantage of feeling, smelling, holding, or trying the items at the same time. While this is true for a real store/shop, the online store does not have this advantage. So, consider features/functions that can be a "replacement" to this disadvantage, such as a 30 day return policy. In a real shop, customers may ask questions at the customer service desks. The same thing can be done with your online store; you can add a lot of information that your customers may need while balancing it with a good design, navigation, and browsing experience. This will ensure that the customer finds the information and this reduces the need to repetitively answer the same queries. This is one of the main reasons why an online store exists, which means that information can be obtained easily 24x7. Therefore, in an online shop, you will have to decide on what kind of features you want to introduce, for example, one block for product information, another for customer service information where they can get information on return policy, how to make payment, and so on. This is just a background that is needed to decide the functions of your store. We will not be discussing about what makes a good navigation or whether one way can be more effective than another. We will learn about how you can use the knowledge about theming for PrestaShop-based stores to build your online store or if you are a web designer, your clients' online stores suitable with the stores' concepts. You will also learn how to go about in applying the necessary modules to complement your theme setup. Before we start this article, you should get acquainted with the back office panel. This will help you understand what we are exploring here. In this article, we will be sticking with the default PrestaShop theme and learn how to: Install, uninstall, enable, and disable module blocks in the center, left, and right columns. Transplant and position modules by moving them to columns and within the columns. The default layout Let's have a look again at your current storefront and how the theme is governed by the back office control panel. By looking at the screenshot, you can tell which back office items you need to modify, replace, or set according to your needs. The basic layout outline can be seen in the following screenshot: Besides the back office control over appearance, our theme is also affected by the modules that control the functionality of your store. At this stage, we will be working on the existing modules in PrestaShop. This is where you decide whether your site visitor will see the product categories, the top selling products, your product listing, the specials, your featured products, and so on. If you run an e-commerce store with a payment option that links automatically to a payment gateway, you may want to study a bit more about each of these modules as well. You will also notice that the default theme uses a three column layout with a header in the top block and a footer at the bottom. Through the back office panel, all the default blocks on the left and right columns can be moved or transplanted interchangeably. Some of the blocks in the header (top blocks) can be moved into the left column or right column. The featured product block and the editorial block, which are at the center column, are pretty much stuck in this position. Modules The Modules tab allows you to control the modules you want to use in the store. You will be able to transplant the modules and move them around according to the site navigation you want, considering some limitations at this stage. You can move them up or down in the columns. You may also position them in the left or the right column or you may disable them. You also have the option of adding a new module or choosing ones that are available from the PrestaStore. PrestaShop has some already installed modules, and the number of newly developed ones is growing every day. Now let's move on to Back Office | Modules, as shown in the following screenshot:     We will go into the listing and get some ideas on each one. However, we will focus in greater detail on the modules that affect theming directly. Among the existing modules in this version (PrestaShop 1.3.1), which are readily available for installation, some of them are: Advertisement – 1 module: Google Adsense. Products module – 6 modules: Cross selling, RSS products feed, Products Comments, Products Category, Product tooltips, Send to a Friend module. Stats Engines – 5 modules: Artichow, Google Chart, Visifire, XML/SWF Charts, ExtJS. Payment – 8 modules: Bank Wire, Cash on delivery (COD), Cheque, Google Checkout, Hipay, Moneybookers, Paypal, PaypalAPI. Tools – 14 modules (but only 12 modules listed): Birthday Present, Canonical URL, Home text editor, Customers follow-up, Google sitemap, Featured Products on the homepage, Customers loyalty and rewards, Mail alerts, Newsletter, Customer referral program, SMS Tm4b, and Watermark. Blocks – 23 modules: Block advertising, Top seller block, Cart block, Categories block, Currency block, Info block, Language block, Link block, Manufacturers block, My Account block, New products block, Newsletter block, Block payment logo, Permanent links block, RSS feed block, Quick Search block, Specials block, Suppliers block, Tags block, User info block, Footer links block, Viewed products block, Wish list block. Stats – 25 modules: Google Analytics, Pages not found, Search engine keywords, Best categories, Best customers, Best products, Best suppliers, Best vouchers, Carrier distribution, Catalog statistics v1.0, Catalog evaluation, Data mining for statistics, Geolocation, Condensed stats for the Back Office homepage, Visitors online, Newsletter, Visitors origin, Registered Customer Info, Product details, Customer accounts, Sales and orders, Shop search, Visits and Visitors, Tracking - Front office. You should also see an Icon legend on the right that reads the following: Apart from these three options of installing, enabling, and disabling, you may also add new modules using the button on the top-left corner of the module tab. There are also plenty of third party modules that can be used to make the store more interactive and attractive. Discussing about them is not within the scope of this article.

(For more resources on PrestaShop 1.3, see here.) Let's move on with our next step. Of course, exploring every tab in the back office would be advantageous, but we will specifically touch only those points that will affect your theming process. We will now look at how we can modify the following: Logo Top of page Adding FEATURED PRODUCTS block Footer Title Placing the other modules useful for your store on other section of your pages. Before going further, I would like to emphasize two important points. They are: Always work on a copy of your default theme: If you have not copied the default theme file, I would advise that when you start your development work, you copy the default theme file so that you have a backup or a comparison to work with. We will be working on the copy of the default theme, as in some cases, we will still change a few lines of codes to modify the theme. This means that if you ever make a huge blunder, you will at least have the original to start with again. If the worst ever happens, you can always upload the original file again to overwrite your errors, but that will be a big waste of time. Keep a quick reference list of any modifications made to any file: It may sound a bit tedious, but you will find this advice useful to heed. There are a few ways of making modifications to your theme, sometimes through modification of your other files (which are not in the theme folder). You may copy the file and put it into the theme folder to make the changes, or it is also possible to merely modify them by overwriting the file in its location. Whichever way you chose, when you need to modify files which are not in your custom theme folder, you should make a quick note of what changes you have made and where have you made them. Why? Because when there is a new version of PrestaShop, you will need to upgrade your PrestaShop site, thus the modifications you have made will be lost. The modifications in the theme folders will remain even if you update the version of your PrestaShop site. By keeping a list of the modifications you've made, it will be much easier to track back to where to re-apply them after you have upgraded your PrestaShop installation. Never procrastinate on making this quick list because you will always find that it is a waste of time to find and trace those changes later; even just six months down the road. Copying the default theme file When you download PrestaShop, by default, you will have a copy of the PrestaShop theme folder. Go to the PrestaShop_1.3.1/themes/PrestaShop folder. Copy this entire folder and save it on your computer. You may rename the theme accordingly, for example, theme1. Compress this into a ZIP file. Upload the renamed folder into the themes directory on your hosting through your cPanel or FTP. You will now have two themes in your /themes folder which are PrestaShop and theme1. You can now log in to your PrestaShop Back Office | Preferences | Appearance and switch to your theme1 that you just installed and click on the Save button. On this page, you may also control what logo, favicon, and the navigation pipes you want to use throughout your website. Now, let's start with the modification of these theme elements to complete the look of your new theme. Logo A logo is an important element of a company's or store's image, and it can contribute to the brand's marketing success. Therefore, getting a good quality logo is fundamental for the business. Getting a unique and attractive logo design can be daunting, especially for those who are not born with a flair for design. However, fortunately, there are various resources that you can use to get ideas or even create a very professional looking logo that you can use in your new online store. Some online resources for logo designs can be found at: http://www.logomaker.com—This is an online resource that allows you to freely create a logo, but you have to pay to download your new creation, which basically uses their online inputs. Quite attractive and interesting looking logos can be found and designed here. http://cooltext.com—This one describes itself as A free graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. It allows you to choose the image you would like through a few simple steps. You only need to enter the words or company name using a form and you'll have your own custom image created on the fly. The logo you designed is downloadable for free. http://www.simwebsol.com/ImageTool/Default.aspx—This is a Web 2.0 logo generator. Free to use and download. It requires you to fill in a few fields and generates the image file quite easily. However, the background is limited to RGB flat choices and you only have 23 images that can be chosen from to insert. http://www.onlinelogomaker.com/ - A full featured free online logo design tool with a clean and easy interface and thousands of logo templates Another element, which is quite important here, is the favicon. The Favicon is the little icon representing the website you are visiting which gets displayed in the address bar of every browser. Usually, the favicon and the logo are the same thing, except for their sizes and the formats. They are not necessarily the same though. You may find some online resources that you can use to generate a favicon for the store. Make sure you have prepared the favicon icon before you try to replace the current favicon. If you are unsure of how to go about making a favicon, you may generate it online (using,http://www.favicon.cc/ or http://www.freefavicon.com/). Save the file on your hard drive and then upload it to your PrestaShop store. Uploading it is shown in the next section. Time for action—Replacing the default logo and favicon on your site The logo and the favicon can be replaced through Back Office | Preferences | Appearance, as shown in the following screenshot:     Browse the file you want to use from your computer. Upload the files and click on the Save button. You need to refresh your back office browser before you replace the logo and the new favicon.ico file. You also need to clean up your browser's cache and refresh the browser to see the favicon in the frontend of the website.     Upon saving and refreshing your browser, the updated images will be displayed. What just happened? In this simple exercise, you have just uploaded the logo that you had created, and PrestaShop has, by default, placed it in the correct directory in your new theme1 directory through the back office panel. If you did not choose the new theme, for example, theme1 in Preferences | Appearance under Themes, the logo you upload will go to the wrong directory. The Center Editorial Block The Center Editorial Block is where you see the main image at the center column, as we indicated previously in the front office. This is an important block, as this is where your visitors first arrive when they visit your store. It gives a first impression to your site visitor, and therefore, you need to consider what to include in it very carefully. Time for action—Modifying the Center Editorial block The Centre Editorial Block can be modified through Back Office | Modules | Tools | Home text editor. In this section, you can also edit the Centre Block image, which is referred to as Homepage's logo, and this title can be quite misleading as it may be confused with the actual logo. However, we have covered this matter in the previous article and did a mapping of each field here to the front office page of the store. You only need to upload the image you want to replace it with and continue with editing the Homepage logo link, which is the link for this image (Homepage's logo). You may just leave it set to your current website address if you want (for example, www.mydomainname.com). You can also leave it blank if you don't want the image to be a link. Furthermore, you will see Homepage logo subheading, which is the small letters you see on the default theme page that appear under the image. Let's replace the Homepage's logo image, Homepage logo link, and a new Homepage logo subheading: Click on the Update the editor button. Review your changes in your front office browser. You will need to refresh the page once to see the effect. It is possible to work with different image sizes, but the width of the image will "disturb" your column settings. If you are not going to make any unnecessary changes, then it is best to use images of the safe maximum width for the center column which is 530 pixels. If you exceed this width it will push your right column outside the standard browser view. Now let's have a look at what you have achieved so far. What just happened? You have modified your Center Editorial Block by inserting a new Homepage's logo image, Homepage logo link, and a new Homepage logo subheading. Top of pages block We will look at the header section of the page. The default layout comprises the following in the header section: Currency block (links to the available currencies used on the site). Languages block (links to the available language translation of the pages interface). Permanent link block: Contact (icon that links to the contact form page) Sitemap (icon that links to the sitemap page) Bookmark (icon that helps you bookmark a particular page on the site) Search block User links block: Your Account (icon that links to the login page or registration page). When logged in, it links to the account page that lists everything the customer can do with their account. It is only when the viewer is logged out that it links to the authentication page Cart (icon that links to the shopping cart summary page ) Welcome, Log in (links to the login page or registration page)     Time for action—Modifying the Top of pages To get these elements back on the pages, you will need to install and enable the relevant modules. These simple steps will need little modifications unless you want to add a new currency and a new language. Let's enable these modules through these simple steps: Currency block—go to Modules | scroll down to Blocks | Currency block. Languages block—go to Modules | scroll down to Blocks | Language block. Search block—go to Modules | scroll down to Blocks | Quick Search block. Permanent link block—go to Modules | scroll down to Blocks | Permanent links block. By default, these modules tend to appear on the pages in the order you installed and enabled them. The first one will appear the leftmost while the last one will be the rightmost. You can shift the arrangement by installing them according to what you want to appear on the leftmost or the rightmost sides. Notice that the Permanent link block is on the right as we enabled it last. There is an easier way to do this as well, which we will cover in the next section. You can modify this by working on the position of the modules within the Top of pages hooks. There are two similar hooks, which can be quite confusing, that is, the Top of pages and Header. The blocks are positioned or "transplanted" in a Top of pages hook and not Header of pages. The Welcome, Log in, Cart, and the User login links can be enabled through Back Office | Modules | Blocks | User info block. Upon installing and enabling the module, you will have the Welcome, Log in, Your Account, and Cart link displayed on your front office. By default, all those are automatically hooked to the Top of pages once they are enabled. If it is not, you can have it hooked through transplanting the module to the hook, as shown in the next screenshot. This can be done by following these simple steps: Go to Back Office | Modules | Position | Transplant a module.     Choose the Module you want to transplant from the drop-down menu. Choose the hook from Hook into, the one you want the Module to go into. Click on the Save button. The arrangement of the blocks can be done by moving them around within the hooks, which we will see next. Go to Modules | Positions. There you can arrange the position of the modules within the hooks by dragging each of them to the required position. As you can see, there are the two similar hooks which may be confusing, namely, the Header of pages and the Top of pages. Compare it with what you have at the front office in the next screenshot.   The Quick Search block does not appear despite it being hooked at the Header of pages. The other blocks which are hooked to the Top of pages are displayed in the front office. The same thing with the User info block; you only see the one which is hooked to the Top of pages and not the one in the Header of pages. The Top of pages hook is used to display a module at the top of the page. The Header of pages hook is used to put code in the <head> tag of the website. If you want to move a module or delete it from the top of the page, you should use the Top of pages hook, not the Header of pages hook. Modules that are in the Header of pages hook should not be removed, since they are required for the module to function correctly. For example, if you remove the Quick search block from the Header of pages hook, the search autocomplete will not work, since the code for it is missing. The resulting JavaScript error will also cause other problems on the website such as the Categories block not displaying any categories. To move the modules to the left or right, you need to move them up within the hook. The lower it is within the hook, the more to the right the module will appear, whereas the upper within the hook will be displayed on the left. For example, the Currency block is first in the list, and it is displayed on the left of the Top of pages section on the webpage. What just happened? You just learnt the differences between the hooks Top of pages and Header of pages in PrestaShop. You also get to modify the blocks you want to use on the top of the page and how to move them around within the hook.

(For more resources on Ubuntu, see here.) What is jailbreaking? Jailbreaking an iPhone or iPad allows you to run unsigned code by unlocking the root account on the device. Simply, this allows you to install any software you like - without the restriction of having to be in the main Apple app store. Remember, jailbreaking is not SIM unlocking. Jailbreaking voids the Apple-supplied warranty. What does this mean for developers? The mass availability of jailbreaking for these devices allows developers to write apps without having to shell out Apple's developer fees. Previously a one-off payment of $300 US, an "official" developer must now pay $100 US each year to keep the right to develop applications. What jailbreaks are available? Arguably the most advanced jailbreak available now is called Spirit. Though unlike a few others, which can now hack iOS 4.0, Spirit differs in a few key features. Not only is Spirit the first to be able to jailbreak the iPad, but this jailbreak also allows an "untethered" jailbreak - you won't have to plug it into a computer every boot to "keep" it jailbroken. Support for jailbreaking iOS 4.0 is coming soon for Spirit. There are tutorials on jailbreaking using Spirit, like this one, but they generally skip over the fact that there's a Linux version, and only talk about Windows and/or OS X. Jailbreaking the iPad A very simple process, you can now jailbreak the iPad very quickly thanks to excellent device support and drivers in Ubuntu. Please note that from now on, you should only plug in the device to iTunes 9 before 9.2, or better still, just use Rhythmbox or gtkpod to manage your library. Install git if you haven't already got it: sudo apt-get install git Clone the Spirit repository: git clone http://github.com/posixninja/spirit-linux.git Install the dev package for libimobiledevice: sudo apt-get install libimobiledevice-dev Enter the Spirit directory and build the program: cd spirit-linux make I've noticed that though Ubuntu has excellent Apple device support, and you can mount these devices just fine, that the jailbreak program won't detect the device without iFuse. Install this first: sudo apt-get install ifuse Now for the fun! Plug in your iPad (you'll see it under the Places menu) and run the jailbreak: ./spirit You'll see output similar to this: INFO: Retriving device listINFO: Opening deviceINFO: Creating lockdownd clientINFO: Starting AFC serviceINFO: Sending files via AFC.INFO: Found version iPad1,1_3.2INFO: Read igor/map.plistINFO: Sending "install"INFO: Sending "one.dylib"INFO: Sending "freeze.tar.xz"INFO: Sending "bg.jpg"INFO: Sending files completeINFO: Creating lockdownd clientINFO: Starting MobileBackup serviceINFO: Beginning restore processINFO: Read resources/overrides.plistDEBUG: add_fileDEBUG: Data size 922:DEBUG: add_fileDEBUG: Data size 0:DEBUG: start_restoreDEBUG: Sending fileDEBUG: Sending fileINFO: Completed restoreINFO: Completed successfully The device will reboot, and if all went well, you'll see a new app called Cydia on the home screen. This is the app that allows you to install other apps. Open Cydia. Cydia will ask you to choose what kind of user you are. There's no harm in choosing Developer; you'll just see more information. Also, if you choose the bottom level (User) console packages like OpenSSH will be hidden from you. You'll also receive some updates; install them. Interestingly, Cydia uses the deb package format, just like Ubuntu: That's it! Wasn't that quick?

(For more resources on YUI, see here.) Long gone are the days when we struggled to highlight a word in an e-mail message for lack of underlining or boldfacing. The rich graphic environment that the web provides has extended to anything we do on it; plain text is no longer fashionable. YUI includes a Rich Text Editor (RTE) component in two varieties, the basic YA-HOO.widget.SimpleEditor and the full YAHOO.widget.Editor. Both editors are very simple to include in a web page and they enable our visitors to enter richly formatted documents which we can easily read and use in our applications. Beyond that, the RTE is highly customizable and allows us to tailor the editor we show the user in any way we want. In this article we’ll see: What each of the two editors offers How to create either of them Ways to retrieve the text entered How to add toolbar commands   The Two Editors Nothing comes for free, features take bandwidth so the RTE component has two versions, SimpleEditor which provides the basic editing functionality and Editor which is a subclass of SimpleEditor and adds several features at a cost of close to 40% more size plus several more dependencies which we might have already loaded and might not add to the total. A look at their toolbars can help us to see the differences: The above is the standard toolbar of SimpleEditor. The toolbar allows selection of fonts, sizes and styles, select the color both for the text and the background, create lists and insert links and pictures. The full editor adds to the top toolbar sub and superscript, remove formatting, show source, undo and redo and to the bottom toolbar, text alignment, &ltHn> paragraph styles and indenting commands. The full editor requires, beyond the common dependencies for both, Button and Menu so that the regular HTML &ltselect> boxes can be replaced by a fancier one: Finally, while in the SimpleEditor, when we insert an image or a link, RTE will simply call window.prompt() to show a standard input box asking for the URL for the image or the link destination, the full editor can show a more elaborate dialog box such as the following for the Insert Image command: A simple e-mail editor It is high time we did some coding, however I hope nobody gets frustrated at how little we’ll do because, even though the RTE is quite a complex component and does wonderful things, there is amazingly little we have to do to get one up and running. This is what our page will look like: This is the HTML for the example: <form method="get" action="#" id="form1"> <div class="fieldset"><label for="to">To:</label> <input type="text" name="to" id="to"/></div> <div class="fieldset"><label for="from">From:</label> <input type="text" name="from" id="from" value="me" /></div> <div class="fieldset"><label for="subject">Subject:</label> <input type="text" name="subject" id="subject"/></div> <textarea id="msgBody" name="msgBody" rows="20" cols="75"> Lorem ipsum dolor sit amet, and so on </textarea> <input type="submit" value=" Send Message " /></form> This simple code, assisted by a little CSS would produce something pretty much like the image above, except for the editing toolbar. This is by design, RTE uses Progressive Enhancement to turn the &lttextarea> into a fully featured editing window so, if you don’t have JavaScript enabled, you’ll still be able to get your text edited, though it will be plain text. The form should have its method set to “post”, since the body of the message might be quite long and exceed the browser limit for a “get” request, but using “get” in this demo will allow us to see in the location bar of the browser what would actually get transmitted to the server. Our page will require the following dependencies: yahoo-dom-event.js, element-min.js and simpleeditor-min.js along its CSS file, simpleeditor.css. In a <script> tag right before the closing </body> we will have: YAHOO.util.Event.onDOMReady(function () { var myEditor = new YAHOO.widget.SimpleEditor('msgBody', { height: '300px', width: '740px', handleSubmit: true }); myEditor.get('toolbar').titlebar = false; myEditor.render();}); This is all the code we need turn that &lttextarea> into an RTE; we simply create an instance of SimpleEditor giving the id of the &lttextarea> and a series of options. In this case we set the size of the editor and tell it that it should take care of submitting the data on the RTE along the rest of the form. What the RTE does when this option is true is to set a listener for the form submission and dump the contents of the editor window back into the &lttextarea> so it gets submitted along the rest of the form. The RTE normally shows a title bar over the toolbar; we don't want this in our application and we eliminate it simply by setting the titlebar property in the toolbar configuration attribute to false. Alternatively, we could have set it to any HTML string we wanted shown on that area Finally, we simply render the editor. That is all we need to do; the RTE will take care of all editing chores and when the form is about to be submitted, it will take care of sending its data along with the rest. Filtering the data The RTE will not send the data unfiltered, it will process the HTML in its editing area to make sure it is clean, safe, and compliant. Why would we expect our data to contain anything invalid? If all text was written from within the RTE, there would be no problem at all as the RTE won't generate anything wrong, but that is not always the case. Plenty of text will be cut from somewhere else and pasted into the RTE, and that text brings with it plenty of existing markup. To clean up the text, the RTE will consider the idiosyncrasies of a few user agents and the settings of a couple of configuration attributes. The filterWord configuration attribute will make sure that the extra markup introduced by text pasted into the editor from MS Word does not get through. The markup configuration attribute has four possible settings: semantic: This is the default setting; it will favor semantic tags in contrast to styling tags, for example, it will change &ltb> into &ltstrong>, &ltti&g into &ltem> and &ltfont> into &ltspan style="font: …. css: It will favor CSS style attributes, for example, changing &ltb> into &ltspan style="font-weight:bold">. default: It does the minimum amount of changes required for safety and compliance. xhtml: Among other changes, it makes sure all tags are closed such as &ltbr />, &ltimg />, and &ltinput />.   The default setting, which is not the default, offers the least filtering that will be done in all cases; it will make sure tags have their matching closing tags, extra whitespace is stripped off, and the tags and attributes are in lower case. It will also drop several tags that don't fit in an HTML fragment, such as &lthtml> or &ltbody>, that are unsafe, such as &ltscript> or &ltiframe>, or would involve actions, such as &ltform> or form input elements. The list of invalid tags is stored in property .invalidHTML and can be freely changed. More validation We can further validate what the RTE sends in the form; instead of letting the RTE handle the data submission automatically, we can handle it ourselves by simply changing the previous code to this: YAHOO.util.Event.onDOMReady(function () { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var myEditor = new YAHOO.widget.SimpleEditor('msgBody', { height: '300px', width: '740px' }); myEditor.get('toolbar').titlebar = false; myEditor.render(); Event.on('form1', 'submit', function (ev) { var html = myEditor.getEditorHTML(); html = myEditor.cleanHTML(html); if (html.search(/<strong/gi) > -1) { alert("Don't shout at me!"); Event.stopEvent(ev); } this.msgBody.innerHTML = html; });}); We have dropped the handleSubmit configuration attribute when creating the SimpleEditor instance as we want to handle it ourselves. We listen to the submit event for the form and in the listener we read the actual rich text from the RTE via .getEditorHTML(). We may or may not want to clean it; in this example, we do so by calling .cleanHTML(). In fact, if we call .cleanHTML() with no arguments we will get the cleaned-up rich text; we don't need to call .getEditorHTML() first. Then we can do any validation that we want on that string and any of the other values. We use the Event utility .stopEvent() method to prevent the form from submitting if an error is found, but if everything checks fine, we save the HTML we recovered from the RTE into the &lttextarea>, just as if we had the handleSubmit configuration attribute set, except that now we actually control what goes there. In the case of text in boldface, it would seem easy to filter it out by simply adding this line: myEditor.invalidHTML.strong = true; However, this erases the tag and all the content in between, probably not what we wanted. Likewise, we could have set .invalidHTML.em to true to drop italics, but other elements are not so easy. RTE replaces a &ltu> (long deprecated) by &ltspan style="text-decoration:underline;"> which is impossible to drop in this way. Besides, these replacements depend on the setting of the markup configuration attribute. This example has also served us to see how data can be read from the RTE and cleaned if desired. Data can also be sent to the RTE by using .setEditorHTML(), but not before the editorContentLoaded event is fired, as the RTE would not be ready to receive it. In the example, we wanted to manipulate the editor contents, so we read it and saved it back into the &lttextarea> in separate steps; otherwise, we could have used the .saveHTML() method to send the data back to the &lttextarea> directly. In fact, this is what the RTE itself does when we set handleSubmit to true.

(Read more interesting articles on Moodle 1.9 here.) Writing a sentence using two images It was such a beautiful day on the beach. The sun was shining in the sky, the sand was clean and glittering, the sea was clear, blue, and full of waves to play with. A perfect day to go for a swim. Alice and her little brother Kevin ran towards the sea together. They played, jumped, and slid with their body surfing boards and the waves. Suddenly, an animal appeared swimming between them. It was a dolphin. It jumped and threw water at them. Awesome! Alice was so happy because she had a new and very special friend on this vacation. Time for action – looking for two images to generate the exercise We are going to search for two royalty-free photos related to the beach in two specialized web pages. We are then going to use them to create a rich activity. Create a new folder in Windows Explorer (C:Beach). Open your default web browser and go to http://animalphotos.info. This web page allows us to search for royalty-free animal photos. Enter dolphin in the textbox and then click on the Search button. Browse through the results and select the desired photo of a single dolphin, as shown in the next image: Right-click on the desired image with the dolphin and select Save picture as in the context menu that appears. Save the file as image030101.jpg in the previously created folder, C:Beach. Open your default web browser and go to http://freedigitalphotos.net.This web page allows us to search for, and download, royalty-free photos. Enter sea in the textbox and then click on the Go button. The available photo thumbnails related to the entered keyword will appear. Browse through the results and select the desired photo of the sea, as shown in the next image: Right-click on the desired image thumbnail with the sea and select Save picture as in the context menu that appears. Save the file as image030102.jpg in the previously created folder, C:Beach. What just happened? We searched for two royalty-free photos related to the beach. In this case, we worked with two web pages, http://animalphotos.info and http://freedigitalphotos.net. We now have the following two digital photos ready to be used in our writing sentences using two images exercise: image030101.png: A dolphin image030102.png: The sea and the shore It is very important to use photos in this exercise because the idea is to train the description of real-life scenarios. Time for action – searching for related sounds We have two digital photos and we want to add related sounds to them. We are going to search for MP3 files to use as sound effects for the scenes in The Freesound Project website (http://www.freesound.org/): Open your default web browser and go to http://www.freesound.org. This web page allows us to search for, and download, sound files. It is necessary to register on this website in order to be able to download its files. The registration and access to its content are both free of cost. The Freesound Project website offers high-quality sounds with a Creative Commons License. The website offers thousands of samples.However, it does not offer songs. Click on Search under Search/Browse. Activate the Filenames checkbox. This way, the website will also search the file names of its sound files database. Enter sea mp3 in the textbox and then click on the Submit button. The results with the details of many sound files will appear. You can click on the Play button on the left-hand side of each sound file's name and preview the recorded sound, as shown in the next screenshot: Click on the selected file name (WavesOnBeach.mp3) or on its waveform. A new page with more detailed information will appear (http://www.freesound.org/samplesViewSingle.php?id=14777), as shown in the next screenshot: Check the license information about the chosen file. Right-click on the Download label, located on the upper right-hand corner, and select Save target as in the context menu that appears. Save the file as sound030102.mp3 in the previously created folder, C:Beach. As this sound is related to the sea represented by the photo named image030102.jpg, we use the same name and another extension (.mp3 instead of .jpg). Next, go back to the web browser and repeat the aforementioned steps (2 to 7) to find and download sound related to a dolphin in MP3 format. In this case,repeat those steps searching for dolphin mp3 and save the sound file as sound030101.mp3 in the same folder. A nice recording of dolphins found on this website is common_dolphins_isla_san_jose_16jan2002.mp3 (http://www.freesound.org/samplesViewSingle.php?id=52099). What just happened? We searched for two sound files in MP3 format because it is easy to integrate it into a Moodle exercise. We now have the following two digitalized sounds ready to be used in our writing sentences using two images and their related sounds exercise: sound030101.mp3: Dolphins on San Jose island sound030102.mp3: Waves on the beach Time for action – activating the MP3 player in Moodle As we are going to add the aforementioned sound files to our exercise in Moodle, we have to make sure that its multimedia plugins are enabled. Log in to your Moodle server. Click on Modules Filters | Manage| filters on the Site Administration panel. If the Multimedia Plugins filter appears in grey and displays a closed eye icon in the Disable/Enable column, you must click on this icon to change it to an opened eye icon. This way, Moodle will enable the multimedia plugins, as shown in the next screenshot: If you made changes, click on the Save changes button. Next, click on Modules Filters | Multimedia Plugins| in the Site Administration panel. Make sure that the Enable .mp3 filter checkbox is activated. If it is not, activate it and then click on the Save changes button. What just happened? We made the necessary changes in Moodle's configuration in order to make it possible to use its MP3 player. This way, we are going to be able to embed the sound files associated with the photographs, offering both visual and auditory perception resources in the exercise.

Creating a sentence using certain words Last Saturday, Alice went to the circus with her mother. Today is Priscilla's birthday and Alice cannot wait to tell her friends about the funny and dangerous things she saw in the circus. She was really scared when she saw the lions jumping through the flaming hoops. She enjoyed the little dogs jumping and twirling, and the big seals spinning balls. However, she has to remember some of the shows. Shall we help her? Time for action – choosing and preparing the words to be used in a sentence We are first going to choose the words to be used in a sentence and then add a new advanced uploading of files activity to an existing Moodle course. Log in to your Moodle server. Click on the desired course name (Circus). As previously learned, follow the necessary steps to edit the summary for a desired week. Enter Exercise 1 in the Summary textbox and save the changes. Click on the Add an activity combo box for the selected week and choose Advanced uploading of files. Enter Creating a sentence using certain words in Assignment name. Select Verdana in font and 5 (18) in size—the first two combo boxes below Description. Click on the Font Color button (a T with six color boxes) and select your desired color for the text. Click on the big text box below Description and enter the following description of the student's goal for this exercise. You can use the enlarged editor window as shown in the next screenshot. Use a different font color for each of the three words: Lion, Hoops, and Flaming. Close the enlarged editor's window. Select 10MB in Maximum size. This is the maximum size for the file that each student is going to be able to upload as a result for this activity. However, it is very important to check the possibilities offered by your Moodle server with its Moodle administrator. Select 1 in Maximum number of uploaded files. Select Yes in Allow notes. This way, the student will be able to add notes with the sentence. Scroll down and click on the Save and display button. The web browser will show the description for the advanced uploading of files activity. What just happened? We added an advanced uploading of files activity to a Moodle course that will allow a student to write a sentence that has to include the three words specified in the notes section. The students are now going to be able to read the goals for this activity by clicking on its hyperlink on the corresponding week. They are then going to write the sentence and upload their voices with the description of the situation. We added the description of the goal and the three words to use in the sentence with customized fonts and colors using the online text activity editor features. Time for action – writing and recording the sentence We must first download and install Audacity 1.2. We will then help Alice to write a sentence, read it, and record her voice by using Audacity's features. If you do not have it yet, download and install Audacity 1.2 (http://audacity.sourceforge.net/download/). This software will allow the student to record his/her voice and save the recording as an MP3 file compatible with the previously explained Moodle multimedia plugins. In this case, we are covering a basic installation and usage for Audacity 1.2. The integration of sound and music elements for Moodle, including advanced usages for Audacity, is described in depth in Moodle 1.9 Multimedia by João Pedro Soares Fernandes, Packt Publishing. Start Audacity. Next, it is necessary to download the LAME MP3 encoder to make it possible for Audacity to export the recorded audio in the MP3 file format. Open your default web browser and go to the Audacity web page that displays the instructions to install the correct version of the LAME MP3 encoder, http://audacity.sourceforge.net/help/faq?s=install&item=lame-mp3. Click on the LAME download page hyperlink and click on the hyperlink under For Audacity on Windows, in this case, Lame_v3.98.2_for_Audacity_on_Windows.exe. Run the application, read the license carefully, and follow the necessary steps to finish the installation. The default folder for the LAME MP3 encoder is C:Program FilesLame for Audacity, as shown in the following screenshot: Minimize Audacity. Log in to your Moodle server using the student role. Click on the course name (Circus). Click on the Creating a sentence using certain words link on the corresponding week. The web browser will show the description for the activity and the three words to be used in the sentence. Click on the Edit button below Notes. Moodle will display a big text area with an HTML editor. Select Verdana in font and 5 (18) in size. Write a sentence, The lion jumps through the flaming hoops., as shown in the next screenshot: Go back to Audacity. Resize and move its window in order to be able to see the sentence you have recently written. Click on the Record button (the red circle) and start reading the sentence. Audacity will display the waveform of the audio track being recorded, as shown in the next screenshot: You need a microphone connected to the computer in order to record your voice with Audacity. Once you finish reading the sentence, click on the Stop button (the yellow square). Audacity will stop recording your voice. Select File | Export As MP3 from Audacity's main menu. Save the MP3 audio file as mysentence.mp3 in your documents folder. Audacity will display a message indicating that it uses the freely available LAME library to handle MP3 file encoding, as shown in the next screenshot: Click on Yes and browse to the folder where you installed the LAME MP3 encoder, by default, C:Program FilesLame for Audacity. Click on Open and Audacity will display a dialog box to edit some properties for the MP3 file. Click on OK and it will save the MP3 file, mysentence.mp3, in your documents folder. Next, go back to your web browser with the Moodle activity, scroll down, and click on the Save changes button. Click on the Browse button below Submission draft. Browse to the folder that holds your MP3 audio file with the recorded sentence, your documents folder, select the file to upload, mysentence.mp3, and click on Open. Then, click on Upload this file to upload the MP3 audio file to the Moodle server. The file name, mysentence.mp3, will appear below Submission draft if the MP3 file could finish the upload process without problems, as shown in the next screenshot. Next, click on Continue. Click on Send for marking and then on Yes. A new message, Assignment was already submitted for marking and cannot be updated, will appear below the Notes section with the sentence. Log out and log in with your normal user and role. You can check the submitted assignments by clicking on the Creating a sentence using certain words link on the corresponding week and then on View x submitted assignments. Moodle will display the links for the notes and the uploaded file for each student that submitted this assignment, as shown in the next screenshot. You will be able to read the notes and listen to the recorded sentence by clicking on the corresponding links. Once you have checked the results, click on Grade in the corresponding row in the grid. A feedback window will appear with a text editor and a drop-down list with the possible grades. Select the grade in the Grade drop-down list and write any feedback in the text editor, as shown in the next screenshot. Then click on Save changes. The final grade will appear in a corresponding cell in the grid. What just happened? In this activity, we defined a simple list of words and we asked the student to write a simple sentence. In this case, there is no image or multimedia resource, and therefore, they have to use their imagination. The child has to read and understand the three words. He/she has to associate them, imagine a situation and say and/or write a sentence. Sometimes, it is going to be too difficult for the child to write the sentence. In this case, he/she can work with the help of a therapist or a family member to run the previously explained software and record the sentence. This way, it is going to be possible to evaluate the results of this exercise even if the student cannot write a complete sentence with the words. Have a go hero – discussing the results in Moodle forums The usage of additional software to record the voice in order to solve the exercises can be challenging for the students and their parents. Prepare answers of frequently asked questions in the forums offered by Moodle. This way, you can interact with the students and their parents through other channels in Moodle, with different feedback possibilities. You can access the forums for each Moodle course by clicking on Forums in the Activities panel.

Putting words inside an image with structure Great! Another vacation day! Alice loved the beach. It was her favorite place to have fun, but she was scared of forgetting what she had learned in school after playing so much on the beach. Therefore, she had an idea. She asked her mother to help her write down everything that she found around her.She had so many things to write down, because the beach was full of people: some of them were sunbathing, others swimming in the sea; there were also children building sandcastles and others playing with balls. Can we help her as well? Time for action – creating a scene We are going to create a scene using a background picture and then add other clipart inside it to represent each word. Start Inkscape and minimize it. You will use it later. Start Word 2007. You will be working in a new blank document. In this case, we will use Word 2007 to search for clipart. However, you can also create a scene with other clipart libraries. We will also use other applications that provide high-quality clipart in other visually rich exercises. Click on Insert Clip Art|. The Clip Art panel will appear on the right-hand side of the main window. Click on the Search in combo box and activate the Everywhere checkbox.This way, Word will search for clipart in all the available collections, including the Web Collections. Click on the Search for textbox and enter Beach. Click on the Go button. Position the mouse pointer over the desired clipart's thumbnail. Since you want to change the picture size without losing quality using Inkscape, remember to make sure that it is a WMF or an EMF file. Right-click on the desired clipart's thumbnail and select Preview/Properties in the context menu that appears. Word will display a new dialog box showing a larger preview of the scalable clipart and a temporary file name. Triple-click on the long path and file name shown after File. This way, you will be sure that the temporary file's full path is selected. Then, right-click on it and select Copy in the context menu that appears. Now, activate Inkscape—remember it was running minimized. You can use Alt + Tab or Windows + Tab. Don't close the clipart's preview window. Select File Import| from the main menu. Click on the Type a file name button (the pencil with a paper sheet icon) and paste the previously copied temporary file's full path in the Location: textbox. The path is going to be similar to C:UsersvanesaAppDataLocalMicrosoftWindowsTemporary InternetFilesContent.IE5WL240QUNMCj04354940000[1].wmf. Click on the Open button. The previously previewed clipart, the background for our scene, will appear in Inkscape's drawing area, as shown in the next screenshot: Return to Word 2007, and close the Preview/Properties dialog box. Repeat the aforementioned steps (6 to 13) for each vector graphic to add to the previously shown background picture, the beach. The next image shows three possible pictures: A bucket and a shovel A beach ball A sandcastle Click on one of the recently added pictures to select it. Eight double-headed arrows will appear in a rectangle around the selection. Drag-and-drop one of the diagonal double-headed arrows and scale the drawing both in the horizontal (X) and vertical(Y) directions. You can do it holding down the Ctrl key in order to maintain the original aspect ratio. Then, drag-and-drop the picture to the appropriate position inside the beach background. Repeat the aforementioned step for the other two pictures to create a scene as shown in the next image: Select File Save| from Inkscape's main menu. Save the file as image030201.svg in the previously created folder, C:Beach. What just happened? We combined several scalable vector clipart images to create a representation of a scene on the beach. Inkscape allowed us to define a background and add different elements on top of it. Each element represents a different word. Time for action – adding floating labels to the image Click on the Create and edit text objects button (a big A with a cursor on the lefthand side) or press F8. This function allows you to add text with different fonts and colors in Inkscape's drawing area. Select the desired font and size using the two combo boxes that appear on the upper left-hand corner of the window, below the main toolbar. Repeat the aforementioned steps (1 to 2) to write the following words as labels, with a layout similar to the one shown in the next image: Sandcastle Umbrella Beach ball Sea Shovel Bucket Once you enter each word, you can click on the desired color in the color palette. It is a good idea to use diverse colors to make it clear that they are different words. Select File Save| from Inkscape's main menu in order to save the changes made to the original Inkscape SVG file. Select File Export Bitmap|. A dialog box showing many export options will appear.Enter 72 on the first dpi (Dots Per Inch) textbox. Click on the Drawing button, and then on Export. Inkscape will export the drawing in PNG format. The exported bitmap graphics with the beach scene and the words at the bottom will be saved at C:Beachimage030201.png. What just happened? We created a representation of a scene on the beach using Inkscape and scalable vector clipart. We first added a background picture and then used vector graphics to add different elements related to specific words. We could change their size without losing quality and we could put them on top of the existing background. We added text labels for each word that represents an element in the scene. Finally, we exported the resulting image to the PNG format. Time for action – uploading the scene to Moodle We now have to upload the original SVG file and its bitmap representation, in order to add our exercise to an existing Moodle course. Log in to your Moodle server. Click on the desired course name (Beach). You can create a new course or use an existing one. As previously learned, follow the necessary steps to edit the summary for a desired week. Enter Exercise 2 in the Summary textbox and save the changes. Click on the Add an activity combo box for the selected week and select Upload a single file. Enter Dragging and dropping words in Assignment name. Select Verdana in font and 5 (18) in size—the first two combo boxes below Description. Next, select your desired color for the text. Click on the big textbox below Description and enter Putting words inside an image with structure. This is the description of the student's goal for this exercise. Press Enter and click on the Insert Image button (a mountain or a tree, according to the Moodle version). A new web page will appear displaying the title Insert image. Click on the chapter03 folder link and then click on the Browse button. Browse to the folder that holds the exported drawing and select the file to upload, image030201.png. Then click on Open and on the Upload button. The label File uploaded successfully will appear inside the File browser box. Next, click on the recently uploaded file name, image030201.png. The image will appear in the Preview box. Enter image in Alternate text and click on OK. The image will appear below the previously entered title. Remember that you can click on the Enlarge editor button to view more information on the screen. Press Enter and click on the Ordered list button (a list of 1, 2, and 3). Write the detailed steps to complete the exercise. Open this picture using Inkscape Drag-and-drop each word to match the corresponding element in the picture Save and upload the new picture Next, select the picture word written in the sentence that describes the first step. Click on the Insert Web Link button (a chain). A new web page will appear displaying the title Insert Link. Click on the Browse button and then on the chapter03 folder link. Click on the new Browse button that appears. Browse to the folder that holds the previously created Inkscape drawing with the scene (C:Beach) and select the file to upload, image030201.svg. Next, click on Open, on Upload, and on the file name link, as shown in the next screenshot: Moodle will display the URL for this Inkscape file in the URL textbox. Enter picture in the title textbox and click on OK. This way, the student is going to be able to download the Inkscape drawing by clicking on the word picture with a hyperlink, as shown in the next screenshot: Select 100 in the Grade combo box. Select 10MB in Maximum size. This is the maximum size for the file that each student is going to be able to upload as a result for this activity. However, it is very important to check the possibilities offered by your Moodle server with its Moodle administrator. Finally, scroll down and select Save and return to course. What just happened? We added the putting words inside an image with structure exercise to a Moodle course.The students are now going to be able to follow the instructions explained in the upload a single file assignment and download the Inkscape drawing to drag-and-drop words. We defined a hyperlink to the Inkscape drawing because the students are going to use it to drag-and-drop each word to the corresponding zone of the scene. The upload a single file assignment allowed us to describe the necessary steps to complete the activity, and it's also going to enable the students to upload their results as an Inkscape drawing. In this case, the necessary steps to complete the activity are just a few sentences in order to simplify the example. However, sometimes, it is necessary to write more instructions when you have to work with other applications such as Inkscape.

(Read more interesting articles on Joomla! 1.5 here.) Introduction Joomla! is a feature-rich content management system, but there are some things it can't do out of the box. This is where JavaScript can become useful in improving the experience of your website to its visitors. Including a JavaScript file in your Joomla! template One of the most basic aspects of using JavaScript with your Joomla! template is including it within the page. There are two ways to do this—within the <head> element of your template, or within the <body> element of your template (best placed just above the </body> element). We'll make use of the method that uses the <head> template. (The reasons to do so are covered in another recipe of this article.) Getting ready Open your template's index.php template, located in your template's subdirectory within your Joomla! installation's templates directory. How to do it... Locate the <head> element of your Joomla! template in the index.php file and insert a <script> element that references the JavaScript file(s) that you wish to use: <!-- some HTML omitted for brevity --><script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/js/javascript-file.js"></script></head> Note that the base directory of your Joomla! installation is inserted automatically to help prevent any problems with changing directory paths to the JavaScript file, should you change your website's location.You will need to change the template's path if you choose to rename your template. For valid XHTML, you need to specify the type attribute, as shown: <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/js/javascript-file.js"></script> How it works... When a browser encounters a <script> element in your page, it loads the required behavior included in the JavaScript file, assuming that your browser has it enabled. See also Including a JavaScript file in your Joomla! template Maximizing backward compatibility with JavaScript Installing Google Analytics Integrating AddThis social bookmarking tool with your Joomla! template Tips and tricks for minimizing page load time when using JavaScript While JavaScript can be used to enhance your visitors' experience of your Joomla! website, it can have a negative impact in terms of both real and envisaged loading times of pages.JavaScript slows down the loading of a page because it's a single-threaded language. This means that nothing else can occur while JavaScript is being loaded or something in JavaScript is being evaluated. As such, a single, slow-loading JavaScript file can prevent a whole website from loading quickly! How to do it... The most obvious thing that you can do to make your Joomla! template load more efficiently is to compress any JavaScript you do use. As such, there are a number of online compression tools that you can use, including the JavaScript Compressor (http://javascriptcompressor.com): Once you've inserted your JavaScript into the Paste your code input area, click on Compress. In this example, we've used a function that creates a slideshow with the use of the jQuery library: // Requires jQuery to run$(document).ready(function() { $('#slideshow-wrapper').cycle({ fx: 'fade', speed: 'normal', timeout: 0, next: '#next', prev: '#prev' }); $('#slidie').cycle({ fx: 'fade' }); }); As you can see, quite a compression is noticeable even with a relatively compact piece of JavaScript, around half the size of the original in terms of memory required to store it (and thus, resources required to load it for a visitor visiting your website). $(document).ready(function(){$('#slideshow-wrapper').cycle({fx:'fade',speed:'normal',timeout:0,next:'#next',prev:'#prev'});$('#slidie').cycle({fx:'fade'})}); Many JavaScript libraries (such as jQuery and MooTools) and features are available in a compressed format already. There is also a Joomla! extension called JCH Optimize that you can use. You can download it from http://extensions.joomla.org/extensions/site-management/site-performance/12088. How it works... As you've seen, JavaScript is a single-threaded language, so one technique to minimize its impact on your Joomla! website's loading times for visitors is to make the JavaScript the last possible item in the page to load. Additionally, compressing JavaScript can greatly reduce page-loading times with larger JavaScript files. It's also worth keeping a backup of the uncompressed JavaScript file, as this makes it easier to change and recompress in the future. There's more... Another way to minimize your Joomla! template's page load time is to reference JavaScript and other template files from different hostnames. Browsers including Internet Explorer and Firefox have been known to limit the number of simultaneous connections to a hostname, slowing down the loading of the page. Moving <script>tags to the bottom of the page The other major factor that can slow down the page load times for visitors to your Joomla! website is the necessity for their browser to have to stop while it deals with any JavaScript included in your page. You can overcome this by reordering the HTML elements in your Joomla! template's index.php file to move the <script> elements to the bottom of the page where they appear inline. See also Maximizing backward compatibility with JavaScript Installing Google Analytics

(Read more interesting articles on Joomla! 1.5 here.) Adding a random background image to your Joomla! template In distinguishing your Joomla! template from others, there are a number of extensions for Joomla! to help you, including one that allows you to display a random image as your template's background image for the <body> element. Getting ready You need to install the extension called Random Background. You can find the file's download link on the Joomla! website at http://extensions.Joomla.org/extensions/style-a-design/templating/6054. Once you have saved the extension files somewhere on your computer, log in to your website's Joomla! administration panel (if Joomla! is installed at example.com, the administration panel is typically accessible at example.com/administrator), and select the Install/Uninstall option from the Extensions option in the primary navigation: You will then be presented with a form, from where you can upload the extension's .zip file. Select the file from your computer, and then click on the Upload file & install button: Once complete, you should receive a confirmation message: Setting relevant permissions for installing the module If you have problems installing the module, you may receive an error message like the following one: The error is most likely because two directories on your server do not have sufficient permissions: /tmp /modules Use Joomla!'s FTP layer to manage the necessary file permissions for you. You can edit Joomla!'s configuration file, which is called configuration.php, in the root of your Joomla! website. Simply add these variables into the file if they don't exist already: var $ftp_host = ''; // your FTP host, e.g. ftp.example.com or just example.com, depending on your hostvar $ftp_port = ''; // usually 21var $ftp_user = ''; // your FTP usernamevar $ftp_pass = ''; // your FTP passwordvar $ftp_root = ''; // usually / or the directory of your Joomla! installvar $ftp_enable = '1'; // 1 = enabled

(Read more interesting articles on Joomla! 1.5 here.) Customizing the breadcrumb The larger your website gets, the more important it is to make use of Joomla!'s breadcrumb feature. Getting ready To start redefining your breadcrumb's style, open the template.css file for your template; use the rhuk_milkyway template for this demonstration. This means that your CSS file will be located in the templatesrhuk_milkywaycss directory of your Joomla! installation. If you visit a page other than the home page in your Joomla! website, you'll be able to see the breadcrumb: As you can see, the rhuk_milkyway template defines the style for the breadcrumb in the template.css file: span.pathway { display: block; margin: 0 20px; height: 16px; line-height: 16px; overflow: hidden;} The HTML that defines the breadcrumb (for the Features page) is as shown: <div id="pathway"> <span class="breadcrumbs pathway"> <a href="http://example.com/" class="pathway">Home</a> <img src=" /templates/rhuk_milkyway/images/arrow.png" alt="" /> Features </span></div> How to do it... You can customize the breadcrumb by changing the CSS, and altering the color and size of the breadcrumb's content: span.pathway {color: #666;font-size: 90%;display: block;margin: 0 20px;height: 16px;line-height: 16px;overflow: hidden;} Once the altered CSS file has been uploaded, you can see your changes: The next step to customizing your breadcrumb is to alter the image used for the separator arrows, located at templatesrhuk_milkywayimagesarrow.png. You'll replace this image with your own new one (which has been enlarged in this image to make it easier to view). Once uploaded, your new breadcrumb looks a little more fitting for your website: How it works... By targeting specific ids and classes with CSS and changing an image in the images directory of our template, we can subtly change our template to distinguish it from others without a great deal of work. See also Styling the search module Styling pagination Styling pagination Some content in your Joomla! website may run over multiple pages (for example, some search results). By styling pagination you can again help to distinguish your Joomla! template from others. Getting ready Open your template's primary stylesheet; generally, this will be called template.css, and is located in the templatesrhuk_milkywaycss directory if we are using the rhuk_milkyway template (as we are for this demonstration). It is also worth bearing in mind the typical structure of the pagination feature within the HTML. We can find this by searching for a common word such as "the" or "Joomla!" on our website. <span class="pagination"> <span>&laquo;</span> <span>Start</span> <span>Prev</span><strong> <span>1</span></strong> <strong> <a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp; option=com_search&amp;limitstart=20" title="2">2</a> </strong> <strong> <a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp; option=com_search&amp;limitstart=40" title="3">3</a></strong> <a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp; option=com_search&amp;limitstart=20" title="Next">Next</a> <a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp; option=com_search&amp;limitstart=40" title="End">End</a> <span>&raquo;</span> </span> Our primary interest in the previous part is the .pagination class assigned to the <span> element that contains the pagination feature's content. By default, the pagination (as seen on the search results page) looks like this: How to do it... Now that you are aware of the relevant class to style, you can add it to your template's stylesheet, with the aim of making the pagination less obtrusive with the surrounding content of your pages: .pagination {color: #666;font-size: 90%}.pagination a {color: #F07 !important /* pink */} Once you've uploaded the newer stylesheet, you'll be able to see the new pagination style, which will appear smaller than before, and with pink-colored links. Producing more semantic markup for pagination As you can see above, the HTML that Joomla! currently generates for the pagination feature is quite verbose—unnecessarily long and untidy. We'll change our template's pagination.php file to use more semantic (meaningful) HTML for this feature by adding each item to a list item within an unordered list element ( Open the pagination.php file and you will see four PHP functions (assuming that you are looking within the rhuk_milkyway template), but the function which is of interest to us is the pagination_list_render PHP function. Currently, the code for this function looks like this: function pagination_list_render($list){ // Initialize variables $html = "<span class="pagination">"; $html .= '<span>&laquo;</span>'.$list['start']['data']; $html .= $list['previous']['data']; foreach( $list['pages'] as $page ) { if($page['data']['active']) { $html .= '<strong>'; } $html .= $page['data']; if($page['data']['active']) { $html .= '</strong>'; } } $html .= $list['next']['data']; $html .= $list['end']['data']; $html .= '<span>&raquo;</span>'; $html .= "</span>"; return $html;} You can see that Joomla! builds up the HTML to insert into the page by using the $html PHP variable. All you need to change is the HTML you can see: function pagination_list_render($list){ // Initialize variables $html = "<ul class="pagination">"; $html .= '<li class="page-previous">&laquo;</li>' . '<li>' . $list['start']['data'] . '</li>'; $html .= '<li>' . $list['previous']['data'] . '</li>'; foreach( $list['pages'] as $page ) { if($page['data']['active']) { $html .= '<li>'; } $html .= '<strong class="active">' . $page['data'] . '</strong>'; if($page['data']['active']) { $html .= '</li>'; } } $html .= '<li>' . $list['next']['data'] . '</li>'; $html .= '<li>' . $list['end']['data'] . '</li>'; $html .= '<li class="page-next">&raquo;</li>'; $html .= "</ul>"; return $html;} If you now upload the pagination.php file and refresh the page, you'll see that the previous style that you had defined only partially styles the newer HTML: If you add the following CSS to your template's template.css file, everything will be styled as you intended before: ul.pagination {list-style-type: none}ul.pagination li {display: inline} Once uploaded, your new pagination is complete:

Re-creating the About Us page Okay, your Home page is now all set. Let's move on to the About Us page. Yes, I know:Office Live Small Business has already created an About Us page for your starter website. The trouble is, it doesn't use the same template as your Home page. Now that's a big no-no. Remember, we agreed that all web pages on your site will use your template. So, we'll have to find a way to apply your template to the About Us page. Unfortunately, none exists. Once you create a web page, it's married to its template; in the present version of Office Live Small Business, at least. Your only option is to create it again using a new template. Go to Page Manager. Click the New Page link or icon on the toolbar. The Create web page dialog pops up as shown. The first step in creating a web page is to choose a template for it. The Create web page dialog lists Standard Templates, which come bundled with Office Live Small Business, and Custom Templates, which you build yourself. Notice that the template that you built on earlier, Base Template, appears as a custom template in the selection box on the left. Select Base Template and click Next. The dialog asks you to Choose page properties. Enter About Us as the Page title. This title appears in the title bar of the browser when you view it. The title About Us is appropriate when referring to companies, groups, organizations, or businesses that involve several people. If you're a magician, for example, and your website touts your services for children's birthday parties, then you may want to change the title to About Me, or About Steve, the Magician (assuming you're Steve, of course). It sounds a little less pretentious. For my website, I'm going to change the title to About the Author, which is more appropriate for a website that's dedicated to a book. Type aboutus in the web address text box. The web address of the page will now be aboutus.aspx. It's a good idea to match a page's title and its web address. Because my page title is About the Author, I'll enter abouttheauthor in this text box. If your page title is About Steve the Magician, you should enter aboutstevethemagician here. Select the Overwrite existing page checkbox. You're creating a new About Us page. But a page by that name already exists. By selecting this checkbox, you're telling Office Live Small Business to go ahead and overwrite it. Select the Show this page in the navigation bar checkbox. Notice that Office Live Small Business automatically enters About Us (or About Steve the Magician, or whatever you entered as the page's title) in the Navigation title text box. Click Finish. The Create web page dialog goes away and the About Us page you just created appears in the Page Editor as shown: Hey! How come this picture shows both About Us and About the Author? Elementary, my dear Watson! Because I didn't call my page aboutus.aspx. Had I done so, Office Live Small Business would have replaced the original aboutus.aspx with my new aboutus.aspx.Because I called it abouttheauthor.aspx, the original aboutus.aspx is still intact. If you're in the same boat as I am in, you'll have to delete the About Us page. I'll show you how to do that later in this article. Select the text Page Header in Zone 2, and overwrite it with About Us (or About Steve the Magician, or whatever). Save your work and preview the page. Close the preview window and return to Page Editor. What just happened? You replaced the About Us page that Office live Small Business automatically created for you with a new page that uses your custom page template. As we discussed earlier, it's a good idea to use a common template for all of the pages on your website. Hence this exercise. Have a go hero – write copy for your about us page The About Us page is for introducing your business to visitors. Do it concisely; nobody really has the time to read a five page profile. Here's the copy that I'm using for my website: About the Author: Rahul Pitre has been writing software of one sort or another for twenty-five years, the last dozen or so of which he has spent developing mostly websites and web applications. He runs Acxede, a software consulting and training firm in New York, where he oversees web application and content development for a variety of clients. He holds a Masters degree in Business Administration and Computer Information Systems. Okay, it's your turn. Here's a rule of thumb that'll serve you well as you write some copy for this page: Write about what people will want to know about you; not what you want to tell people about yourself. Don't know where to start? Here are some points you might want to consider: What you do. How long you've been in business. The area that you serve. I highly recommend including your area and ZIP code in the copy. People often Google for phrases like Magicians in NY 10701. If you mention your general area and ZIP code in your text, there's a better chance of people finding you through search engines. Are you an authorized dealer for some big company? Again, people often search for phrases such as authorized Sony service center NY 10701. Have you received awards or citations for excellence? Are you a member of the Better Business Bureau or the local merchants' association? If your services are professional in nature, do you have the necessary qualifications? Licenses? Registrations? Insurance requirements? If you prefer writing conversational text, write it in short paragraphs. Alternatively, you can use a combination of text and bullet points. But, keep it short. And for heaven's sake, don't write a mission statement. Remember to write the text in a plain text editor such as Notepad; not in a word processor. Re-creating the Contact Us page Now let us now create the Contact Us page again using your site's template. Time for action – re-creating the Contact Us page Go to Page Manager. Click the New Page link or icon on the toolbar. The Create web page dialog pops up. Select Base Template and click Next. The dialog asks you to Choose page properties. Enter Contact Us as the Page title. This title appears in the title bar of the browser when you view it. Type contactus in the web address textbox. Select the Overwrite existing page checkbox. Select the Show this page in the navigation bar checkbox. Click Finish. The Create web page dialog goes away and the Contact Us page you just created appears in the Page Editor. Select the text Page Header in Zone 2, and overwrite it with Contact Us. Save your work and preview the page. What just happened? You replaced the Contact Us page that Office live Small Business automatically created for you with a new page that uses your custom page template. The Contact Us page is kind of unique. You might have noticed that the page you just replaced had a form for visitors to contact you. Normally, you'd have to write a little program to process the information they provide. The program would extract the information from the form and e-mail it to you. Thankfully, Office Live Small Business has a built-in component that does the job admirably. All that you need to do is to set the e-mail address at which you wish to receive the e-mails. Because you re-created the page, that form is now gone. The reason why I'm deferring it for now is that you haven't worked your way through a few prerequisites yet. Creating the Privacy Policy page you have to create your website's footer , you created a link to your website's "as yet non existent" privacy policy as shown: Let's now create a page that states your privacy policy and activate the link to it in the footer.