The Server Side

Introduction

This weeks blog will talk about the server side of web application development. We were required to install XAMPP, which a single installation for Apache, MySql , PHP, FTP Server and other services. After the installation we were required to do the following tasks:

• Test the following functions:

1. Control panel
2. Check that the http and https services work
3. Ftp service
4. Get an XAMPP security report
5. Get a phpinfo report
6. Get a visitor report
7. Test the default guestbook

• Add an image and a style sheet to C:\xampp\htdocs\index.html and test it out
• Test your web server from another computer
• Attempt to replace index.html and other files using an FTP client on another computer
• Blog about the tests you preformed. Take particular care to talk about any errors or problems you encountered.

Installing and configuring XAMPP

The control Panel

XAMPP is very easy to install and manage. You just have to follow a very straight forward installer and the rest is done by the installer itself. The first thing you notice after installing XAMPP is a little orange in the notification area. Of course we are talking about XAMPP for Windows is this case. Clicking on this icon will pull up the control panel which controls several services installed with XAMPP.

My control Panel has four modules, Apache, MySql, FileZilla and Mercury. From this control panel, one can start, stop or configure the services provided. By checking or unchecking the svc Check box near each module, one can add or the remove a particular service from XAMPP.

When I started XAMPP, all services were installed and launched correctly except for apache. At first I thought something when wrong with my installation, but soon I realized that the error occurred because I had another web server previously installed. IIS server was already installed on my windows 7 machine and therefore apache could not run simultaneously with IIS. This is due to the ports used. Both IIS and Apache use port 80 by default. To get apache working I had two options, either changing the port for apache by editing the httpd.conf file in the apache directory or by temporarily disabling IIS during testing. Since I had no need for both services to run on my machine I chose to disable IIS temporarily while using apache. Later I also tried changing ports for both Apache and IIS to see if they work simultaneously, and they do.

Well getting the services to work is pretty straight forward using XAMPP, unless you have problems with other services using the same resources.

Checking Services

To check if the http service is running, I launched the web browser and entered the loop-back address. The default XAMPP webpage launched, indicating that I successfully installed the apache server. I added HTTPS:// in front of the loop-back to test if https was working and a page indicating that the service was running correctly was shown. You can also check the status by going to the status page in the xampp index page.

To test the file Server, I downloaded the FileZilla FTP client. To get a connection in a new Filezilla FTP server (in a XAMPP installation) one must use newuser as username and wampp  as password, using the default FTP port 21. I managed to easily connect to the FTP server thanks to the instructions found on the XAMPP local webpage under the Tools section. By XAMPP Local webpage I meant the index.html that is set as homepage when XAMPP is installed.

The image below shows the FTP client Connected to the FTP server.

XAMPP Security Report

Getting a XAMPP security report is easy. You must go to your localhost address to open the Local XAMPP index page. In the list of tools on the left, the is a link called security. This link opens a new tab with a list of security concerns and the status of the security risk. This tab can only be accessed by the local host.

Well as you can image, nearly everything is unsecured after the installation, since most services still have the default passwords which are known by everyone. Well Change the FileZilla password using the gui tools provided by the filezilla control panel. To change the MySql password there are two options. You can use the tools provided in the XAMPP security section or you can change the passwords yourself from the configuration files. Changing the MySQL password without GUI is slightly more difficult if you dont have additional tools installed. I used the tool below to change my password.

 $ mysqladmin -u root password NEWPASSWORD

This is a comandline tool that must be run from the bin directory under theMySql parent directory. This solved the mysql security issue by cause the phpMyAdmin to not recognize the root administrator of the mysql DBMS. Well to solve the problem one only needs to open the file config.inc.php in the phpMyAdmin directory and edit the root password, and allowing the tool to use the password. These steps are all done automatically if you choose to use the XAMPP tools in the security page.

Another security concern was that PHP is not running in safe mode. For my case, I don't need to run it in safe mode. The last unresolved issue is regarding the phpMyAdmin login. By default there is no password. Well fortunately by using a link available in the XAMPP security page, it is easy to fix this problem by adding a password. Also by default all pages are visible to users on the localhost without the need of any password. It is important to make apache pages password protected such that users cannot view or edit information on the apache server. If you have already created a user and secured these pages, Users are normally kept in a file in the directory C:\xampp\security\xampp.users in encrypted format or in a text file with a visible address in the security page. The choice is up to the user. To delete users, you must delete them manually from these files. To disable this feature you must go to C:\Xampp\htdocs\xampp\.htaccess and comment the line require valid-user. Apache pages by default are not accessible from outside the local host, but they can be made accessible by editing the file httpd-xampp.conf found in the directory c:\apache\conf\extra\httpd-xampp.conf.

The image below shows the security results after all security concerns were corrected.

XAMPP phpinfo(), Visitor Report and Client Guestbook

To view PHPinfo() I clicked on the link listed in the default index page and a new page opened showing several PHP settings.

To view a Visitor Report I used the webalizer tool which is part of the Xampp package.

Finally I obtained  the guest book by following another link in the default index page. I also added my name to the guest book.

Editing index.html

To edit index.html I simply went to the index.html location and edited the file. The following image is the result. I added the XAMPP icon in the center of the page.

The image below shows the index.html as accessed from outside the webpage. Notice that there is an IP address in the address bar instead of localhost.

Finally I tried to replace Index.html using an FTP client. Well first I conncted to the FTP server using Filezilla client and dragged my index.html in the FTP server. A dialog to overwrite the current file was displayed. I overwrited the file and everything worked fine. The image below shows the overwrite dialog.

Conclusion

Xampp is a great tool that eases up the installation and integration of several services. It is easy to use and does not take too much resources while bringing the big advantage of centralization where everything can be controlled from one source. Without XAMPP these services would be difficult to install, not to mention, maintain.

Web Accessibility

Today's post will be about a recent presentation on Web Accessibility, conducted by Lucy Dodd. Dodd worked as an accessibility specialist at BBC and therefore has exceptional knowledge on the subject. The presentation tackled some basic difficulties that users might have when using a web site.

I had never given any though of how a website would look to a person with disabilities. The presentation talked about different disabilities that users might have and the difficulties they may encounter. Different methods exist, that web site developers can implement to improve accessibility to these users. In the presentation, different tools help developers achieve these tasks where mentioned. These tools include software that can test web sites for their accessibility. Some of the methods illustrated are quite simple to achieve but sometimes they are not implemented simply because developers are external to these user accessibility problems.

There were several disabilities discussed but they can be categorized into: Auditory, Cognitive and Neurological, Physical, Speech and Visual disorders. Some of the solutions are easy to think of, for example a good choice of colors and large fonts for people with slight vision disorders, and subtitles or video descriptions for users with hearing disorders. Other solutions are harder to think of, especially because you have to know what technologies are available to provide the appropriate accessibility. People with no Vision use text readers which read out the text contained in the websites. If the content of the web site is not well structured, people using text readers may find it difficult to find what they are looking for.

Standards are important when creating a website. The Web Accessibility Initiative (WAI) is a group that provides a list of accessibility standards and Guide lines that should be followed when creating a website. The page http://www.w3.org/WAI/intro/people-use-web/browsing provides a paragraph that describes briefly the software and hardware used to improve interaction with the web. Along with the screen readers which I already mentioned, other technologies can be used. People with low vision may use screen magnifiers such that text can be large enough for them to read. Users who cannot use keyboard or mouse may use voice recognition software and selection switches to allow them to browse through the web. Since these users use different hardware, it is important to make website that work with all types of inputs such that they do not rely on one type of hardware only.

Usage of external technologies such as flash and scripting languages may make pages look better but may also decrease usability for certain users. For example, if text in flash objects is not read by screen readers, people with no vision would not be able to use the website. A lot of animations may also disturb some users, so websites should avoid using to many animations, or provide a way to stop them. The same things apply to the use of sound and music.

Another thing which I had never though of, is the level English used in a website. The content should use plain and simple English such that everyone can understand it. It is not the first time you enter a website and get confused on what to do next. Well to people with lesser knowledge of the English language or to people who have lesser knowledge of computers, orientation in these sites may be even harder.

I think that web developers should be aware of the different difficulties users might have and should also use the different guidelines which can be easily found on the internet. Since web is for every one, it should be also accessible to everyone when possible. For obvious reasons these guidelines are more important to heavily used websites but this dos not mean they should be ignored when creating small websites. This presentation introduced me to an important perspective which I never though of.

XML Files

Introduction

This week I will talk about XML and its uses, but first I will make a brief introduction the XML task. The first part of the task involves creating an XML file that can keep the following information about student projects:

• Student Name
• Student ID
• Project Title
• Project Category
• Abstract
• Date Submitted

The use of both elements and attributes is necessary for this exercise. The XML code must be verified. A DTD schema must be created such that the content of the XML file can be validated through DTD validation.

Introduction to XML and related Types

XML is basically a form of text file that uses a structure to contain information. XML stands for Extensible Markup Language. The reason for this name is that XML unlike HTML has no defined set of tags, you must define your own tags. The possibility of creating customized tags can be used to help define data and thus allow for easier data transmission, validation and interpretation between applications and organisations. If structured correctly, XML can be easily readable even to non computer expert users as XML was designed to be self-descriptive.

XML is a way to structure and send data, but does nothing on its own. You cannot load a piece of XML into the browser and expect the browser to understand it. You can however transfer information between applications that understand the structure of a particular XML file. XML has a tree structure in the sense that it has only one parent element which can have many child elements, which can have their own child elements and so on.

Since XML has allows for the liberty of creating ones own structure, validating the XML file content is not enough when it is used for communication between different systems. The structure must also be verified such that it matches the one expected on the receiving end. This is were DTD kicks in. DTD defines the document structure with a list of allowed elements and attributes. DTD can be placed inside the XML file or linked by an external reference. An alternative to DTD  is the XML Schema. An XML Schema is a description file of a type of XML Document.

The XML Document

1 2 3 4 5 6 7 8 9 10

<?xml version="1.0"?> <project>    <student name="Mark" ID="762" >       <projecttitle>Web Development</projecttitle>       <projectcategory>IT</projectcategory>       <projectabstract>usage of Javascript and CSS Styling</projectabstract>       <submitteddate>2011-12-12Z</submitteddate>    </student> </project>

The table above shows the XML structure I choose for this particular exercise. As it can be seen in the table, project is the first element  of the document. The element student is the child of project and contains child elements of its own. Student has two attributes which are; name and ID. Assuming projects are per student, project's title, category, abstract, and submitted date are contained within student. I chose this particular structure because I find it easy to read and understand.

DTD (Document Type Definition)

1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE project [ <!ELEMENT project (student)> <!ELEMENT student (projecttitle,projectcategory,projectabstract,submitteddate)> <!ELEMENT projecttitle (#PCDATA)> <!ELEMENT projectcategory (#PCDATA)> <!ELEMENT projectabstract (#PCDATA)> <!ELEMENT submitteddate (#PCDATA)> <!ATTLIST student name CDATA #REQUIRED> <!ATTLIST student ID CDATA #REQUIRED> ]>

The table above shows the DTD Schema of the XML Document illustrated in the previous section. <!ELEMENT is the tag that describes the elements. It should be immediately followed by the elements name and a pair of brackets. The brackets should contain the name of the sub-elements or the type of data expected. PCDATA stand for parsed character data which means that the text inside the elements will be considered as mark up and any tags inside the text will be expanded. After the declaration of the elements, the attributes need to be declared. <!ATTLIST is the tag used for attributes. The name of the element having the particular attribute is then entered along with the attribute name. In this case CDATA is used. This type of data is threated as normal characters and is not parsed. The text #REQUIRED imply that the element is required and must be included. The DTD was tested with a validator offered by w3schools.com.

XML Schema

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">    <xs:element name="project">         <xs:complexType>              <xs:sequence>                   <xs:element name="student" >                        <xs:complexType>                            <xs:sequence>                                <xs:element name="projecttitle" type="xs:string"/>                                <xs:element name="projectcategory" type="xs:string"/>                                <xs:element name="projectabstract" type="xs:string"/>                                <xs:element name="submitteddate" type="xs:date"/>                            </xs:sequence>                            <xs:attribute name="name" type="xs:string" use="required" />                            <xs:attribute name="ID" type="xs:string" use="required"/>                        </xs:complexType>                   </xs:element>               </xs:sequence>         </xs:complexType>    </xs:element> </xs:schema>

In Addition to the DTD, I created the respective XML Schema. XML Schema is a more powerful way to define your XML document structure and limitations than DTD. These schemas are XML documents themselves which reference the XML Schema Namespace, and even have their own DTD. They improve from DTD as they also check for a wider range of element types which are common to todays programming languages. Writing this type of schema is slightly more difficult and results in a larger volume of code than DTD.  The schema shows that an element project of type complex-type contains an element student. this element contains, a sequence of other elements and two attributes. 'use="required"' is used instead of #REQUIRED.  On line 15 the element submitteddate is declared as date. The date is accepted in yyyy-mm-dd format. In line 8 in the XML file, the submitted date is 2011-12-12Z, where Z shows that the time is UTC time. The XML schema and XML Document was tested at http://xmltools.corefiling.com/schemaValidate/.

Conclusion

Both DTD and XML Schema are good validators that can verify the correct structure of your XML file. An important factor in the choice of which technology to use, is obviously the type of validation required. In certain situations DTD could not test for all the requirements and thus should be avoided. On the other hand DTD could avoid some of the complication provided by the XML schema and can be ideal for some situations.

Running man in JavaScript

Introduction to The Task

Hello again and welcome to this week's blog post. As hinted in the title the task for this week involves creating an animation of a running man. The animation must be able to change speed and on the click of a button (or other event) an object must be thrown at the runner. Adding to this task, I decided to include some other features of my own.

Creating The Animation

To start the animation, I used an already written script found in the notes. In this script, images were loaded into an array, and the array was then looped at small time intervals making the image appear moving. The animation is triggered by a button called run. The code provided had a small bug that when the run button is hit more than once, the animation would become unstoppable. The first thing I did to avoid this error is to disable the run button once the running process begins.

For the animation, I found an interesting free GIFF image which I downloaded and converted into a sequence of PNG images using an online tool at http://www.online-image-editor.com/. I used the images to create a running man animation. I also created a copy of these images and altered them to create the second animation for throwing an object. Finally to allow the throw object animation, I created a button called throw that alters a variable that controls the looping process. More exactly I made a loop to run through the first 8 images only so that the man in the animation appears to be running, but when the throw button is clicked, the animation loop continues till the last image showing the final part of the animation. The throw animation involves the runner avoiding a tin can thrown in the direction of his head and passing above a man hole left opened.

The final part of the exercise involves altering the running speed of the animation. The speed can be altered simply by changing the time interval between the sequence of images being displayed. To get the chosen speed, I used the HTML select input such that the user can select from a list of different speeds. Speed can also be altered when an animation is already running. To alter the speed animation using the pre-existing code, the animation must be stopped, and restarted with the new time interval. Therefore when speed is changed, the looping process stops and restarts automatically. This process is transparent to the user.

Additional Features

The first feature I wanted to add was a slider or track bar, that tracks the position of the animation. At first I used the Range input to do this, but I soon realized, that this input type is only available in HTML5 and works only in chrome. Instead of giving up, I decided to create my own range input using purely HTML and JavaScript.  First I created images for the slider and slider piece. 

Then I researched how to do drag and drop such that I could slide the blue slider piece where I wanted. I found Several code for drag and drop capabilities and after I finished my little research I started creating my own code that allowed the slider piece to only move horizontally and only in a particular range.

The first thing to do is to determine what inputs does the browser support. Some browsers do not support all the features or use different syntax while other browsers might understand all the commands or react differently to the same command. To avoid unexpected behavior, I used a boolean value to determine which functions I should use in the particular browser. Using the bool variable nn6 as shown below, the script would choose the appropriate functions to run  based on the the support of the document.getElementById or document.all.

var nn6=document.getElementById&&!document.all;

Another variable is used to determine whether the blue slider piece is being dragged or not. The onmouse down event triggers a function that sets the variable to true and calls another function which I called moveMouse. This function determines the position of the mouse and verifies that it is within the slider range. If the mouse goes out of range the slider piece stops mooving. OnMouse down event the dragging variable to false and the dragging object to null, such that the slieder piece is no longer effected by the mouse movement. for the  code to work the piece image must have an absolute position in the CSS style.

Adding to the drag and drop features I  included another function that allows clicking on any part of the slider range, to obtain the image at that position. This feature will be later explained in this blog. While running, the piece slider is also moved to show the position of the current runner position during the animation.

Since I was dealing with time and animation positions, I decided to use cookies such that the browser remembers the animation position of the runner when the user clicks stop and closes the browser. I found the code to create cookies on http://www.w3schools.com/   but the code was not working or at least I tough so. Then I found out that my code works perfectly, but chrome does not allow local cookies to be saved, so I had to test my page on a web server. When the browser starts, it searches for the animation position in the cookies. If found, the animation starts from that position even if that position is part of the throw object animations.

Finally I added up some sound of footsteps to the animation. Inserting an embed element to the html, using Java script does the trick. Not all browsers support music natively so I added support to the Windows media player plugin for firefox. This plugin works also on chrome, and allows sounds to play on a wider range of browsers. Note that browsers that do not support this plugin, but support the format of the sound natively, can also  play the footsteps. To add support to the firefox plugin, one simply needs to add  type='application/x-mplayer2' as Embed type. The embed type adds a windows media player to the page which allows users to control the music, but in this case the media player is invisible. The music starts because the autostart value of the embed object is set to true

Determining Exact Mouse Position

To determine positioning of objects, I used  several techniques to get the x coordinates of the objects involved. An important part of the code is from line 176 to 178, as that code determines whether the mouse is within the slider range. It does that by comparing the x coordinates of the slider and slider piece. It also compares the slider piece's x coordinate with the slider x coordinate plus its width.

Clicking on the Slider Image

When a mouse click is detected on the slider image, the function below is triggered. Line 144 determines the position of the blue slider piece from the slider' left offset position, which is its x coordinates. In the following lines, the width of the slider is divided by the number of possible image positions (excluding position 0) to get the distance between each position. The current piece position is divided by the previous calculation, to obtain a rounded integer that gives the image number to display corresponding to the area clicked. Finally line 149 sets the piece position to the clicked area.

Piece Image Movement while the Animation is Running

The function marathon is executed repeatedly in time intervals, to obtain an animation. To explain briefly, the code below increments the image number every time it is executed. In the case the last image is displayed, the image number is reset to the first. The piece position is calculated based on the image number in this case stored in curRunner. This is done by finding the distance between each position and multiplying it to the number of positions. To find the actual left margin the the piece position works on, the x coordinates of the slider image must be added to the previous calculation's answer. The calculation is shown in lines 136 to 138.

Final Corrections

After I implemented all the features mentioned above I needed to correct some minor errors which started to bother me. The first problem occurred on window resizing. Since the piece position is absolute, when the screen size changed, all elements changed positions, but the slider piece's position remained the same. To avoid this error I added the windowOnResize and page onload events such that when they are triggered, the piece position gets recalculated. I also corrected some piece positions like in line 149 by decreasing or increasing the left margin of the piece element. In this case I added -4.

When I uploaded the site to an actual web server, Images started to load slowly. I found a method that solves this problem. I loaded images in memory by using new Image(254,266) method which creates an image with the given dimensions. Then after creating the image I assigned the actual image path to the image array. This was all done when the page is loaded, such that on page load, all images are already cached in memory.

To avoid errors some buttons are disabled, and enabled depending on the processes running. This feature can be seen in the screenshots.

Some Screenshots

You can try the animation at http://mark-galea.webs.com/ or download it from http://www.megaupload.com/?d=08M78QK0.

Introduction to JavaScript

Introduction

A week has passed since my first posts and it is now time to blog about my experiences in the second week on my journey in web application development. For this week’s task we were given a Web page that contains JavaScript that acts as a Loan calculator. Our task consists in altering and adding up to the already existing script to add features to the Loan Calculator. Improving the visuals using CSS style sheets is also part of the exercise.

In the task provided, the use of the website http://jsfiddle.net/ was suggested as a working platform. This website creates a developing environment which takes in HTML, CSS and JavaScript to output the resulting webpage. The HTML, CSS and JavaScript are inputted in separate boxes and not as a single HTML file. I tried using JFiddle and did most of the JavaScript there, but I found using a text editor being better. However the idea of separating the code seemed very good therefore I separated my code into different files.

Task Development and Explanation

It was not the first time that I had peeked into some JavaScript but I had never written anything in it. For starter, I downloaded a good text editor called “Programmer’s Notebook” that can highlight keywords for many different languages. This way it is much easier to create code and find errors.

The Loan Calculator provided takes in the amount of the loan, the annual percentage rate of interest and the repayment period in years as input. The monthly payment, total payment, and the total interest paid are the results of the Calculation.

As part of the exercise we had to add the number of payments and the date when the loan ends as Outputs together with a checkbox that adds discount to the formula. Well the number of payments is easy to achieve since it only involves multiplying the payment period by the number of months in a year. The date calculation is a little trickier. Assuming the starting date is the date the computation occurs, I added up the number of months to the current date by using the formula in line 58. To make it more interesting I assumed that the repayment period in years could be a decimal. I used Math.ceil() such that if the number of payments is not a whole number, it would be converted into the next bigger Integer available. The Reason for using Math.ceil instead of Math.round is because payments are usually done in the end of the month and the extra days are considered as another month. Lines 60 and 61 show how I managed to output the date in short Date format.

Next in line was the discount. To compute the discount, I simply deduced the total discounted payment from the total undiscounted payment. The final part of the exercise suggested that each student creates a feature of his own. Since I wanted to learn JavaScript starting from the basics, I created a new textbox that takes in the amount of discount. This input box is enabled and disabled depending on the checked property of the checkbox controlling the discount. The discount cannot be greater than 50%. If so an alert is triggered. When the Discount checkbox is disabled, no discount is computed and the discount box is disabled and also cleared. Finally I downloaded a CSS template as a reference and I used it to make the webpage look alike while adding a touch of my own.

Final Comments

JavaScript is a language that uses syntax similar to other popular languages but its structure is different. It can be quite difficult to manage due to the way it manages variables. In fact in JavaScript variable types are not declared making it very easy to get confused. Another disadvantage is that JavaScript is downloaded and executed on the client’s side and therefore it is unsafe as it can be easily altered from the receiving end. On the other hand JavaScript can help create a better user experience.

HTML and CSS

While continuing to practice further more after the weekend, I tried my design in different browsers and came across some annoying problems which I felt the need to discuss.

In my design I used border-radius to round-up corners of some coloured boxes. I knew that this kind of styling differs from browser to browser therefore I included different code that would work in different browsers. To my surprise some Internet explorer versions do not support this feature, only IE 9 supports it. Another way to obtain this feature is by setting an image with round borders in the background which obviously involves much more work.

Other Problems I encountered were margin related. While testing in Chrome I set up some margins to position some text areas. Internet Explorer Positioned the text areas differently from chrome and therefore my design was slightly messed up. As some of my friends suggested, adding * { margin:0; padding:0;} in the beginning of the CSS file solves this margin problem.

I also encountered other minor issues due to features that work in chrome but do not work in Internet explorer. I used the corresponding Internet Explorer code to solve these issues.

The website http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx contains an interesting list of supported CSS functionality for IE.

It was more difficult than expected to create a style that looks that same in all browsers, fortunately these differences are being reduced as the newer browsers have much more features in common.

Introduction to Client/Server Web Development

As this is my first post, I should introduce my self properly. My name is Mark Galea and I am currently studying at STC Malta doing my BSc (Hons) in Internet Application Development degree with Middlesex University. As a part of my “Client/Server Web Systems Development” module I am required to blog my experiences during this year.

In the first week we tackled HTML and CSS technologies. Although I had prior knowledge of some HTML features, I never really learned it nor had I previously used CSS. This week I was involved in some research to learn about these technologies. Currently I also work on WPF browser applications, which generate similar code called XAML using GUI tools. This made it much easier for me to learn HTML and CSS as I could easily read all the code and understand it although I could not write anything from scratch.

For experimenting in CSS technologies, I visited http://www.csszengarden.com/. There one can download an HTML file and its CSS file. By altering the CSS file, the appearance of the webpage can be altered. To start experimenting I preferred altering a ready made CSS file, instead of creating a new one, as it is easier for me to learn this way. CSS is quite readable so I had no problems at all tweaking the design.

To get a good result, a simple design or idea of how the final website will look like is needed so I tried to find ready made designs on the internet. In the mean time I continued to edit the blog’s appearance. Here I found a template which seemed suitable to what I was doing in the CSS garden project. I decided to recreate the same template in my project. I used Google chrome’s inspect element feature to find the exact hash color codes used in the template.

Finally I started creating my CSS file, keeping some of the code from the original source. I decided to base my theme on technology, so I called the website Technological Garden. Most of the features implemented were obtained by trial and error, while other features were taken from other sources using the inspect element to view the code. The website http://www.w3schools.com/ was very helpful as it contains some examples and explanations. To make the page more visually appealing I added some pictures in the CSS Design. Since the original titles in the HTML files cannot be tweaked, I set these titles’s appearance to none and inserted pictures containing the respective titles.

To complete my design I needed to alter fonts including those of links. I tried various fonts in an office application before the actual implementation in the CSS file. The page needed further editing after this step such as text padding and margins to control the text areas.

Editing the site seamed easy but creating one from scratch is a different story. While editing I wanted to put all the text into one box with a different colour from the background but this was not possible. This couldn’t be done due to the way content was grouped. The CSS separates the content from the layout, but in the end the layout must match the content, meaning that the way in which content is grouped in HTML tags must also be given a lot of thought. Eventually I managed to accomplish the task by creating separate boxes and with the use of negative margins they looked as one. I also used text padding such that the text in the overlapping area remains visible.