Contact Page

This is a contact page - a form and a link to an email address and twitter should make it easy for curious people to get in touch.

Customised Search using HTML, XML, and JavaScript.

I used an XML page to get the results from this form. The form used JavaScript to generate the table of results.

Here's a screenshot of my 'Customised Search' page.

You select the options from the drop down menu.

Here's what happens if there are no results:

And if you get some results from the XML database...

A Futuristic 'Killer App'

I have just finished this simulation of an application. It (is meant to) use RDF files of music on your computer to look at artists you like, and find similar artists for you to listen to.

Here are some screenshots of it in action:

Loading...

Fetching RDF files...

Analysing music...

Comparing artists...

Your results!

It would be pretty cool if it was a real application, I'm sure I would use it to find more music.

SVG (Group Project)

SVG stands for Scaleable Vector Graphics. It is a markup language which works with 2D vector and raster images, as well as text. SVG is XML based, and drawings created can be interactive and dynamic. It can be used to create basic shapes such as rectangles and circles, but can also create filters such as a gaussian blur and gradients.

But why would you want to use SVG rather than any other kind of graphic file? Adobe describe SVG's as "compact and provide high-quality graphics on the Web, in print, and on resource-limited handeld devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics".

SVG's are scaleable, meaning that users can "zoom in" to view the image in more detail. They can also be displayed well at varying resolutions. They are rendered on the viewers side, so will use their processing power.

 

HTML5 Canvas (Group Project)

The canvas element is a new way to draw graphics in HTML5 using JavaScript. Most of today's browsers include HTML5 support, meaning it is widely available. You can create JavaScript commands in a "context" to draw graphics. The "context" is the work area which you use to implement your HTML5 canvas.

The canvas itself is a rectangular space which has different methods for drawing shapes such as rectangles, lines, circles, and displaying images.

Here is an example of the code which shows how to set up canvas in an HTML5 document.

<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>

Here you can see that you can assign attributes such as width, height, and canvas ID. We can also use X and Y co-ordinates to place images / drawings on the canvas in certain locations.

Here is an example of the code which allows you to draw a red rectangle.

<script type="text/javascript">

var c = document.

getElementById("myCanvas");

var cxt = c.getContext("2d");

cxt.fillStyle = "#FF0000";

cxt.fillRect(0,0,150,75);

</script>



This project needs a question / problem and an answer / solution.

My essay looked at bioengineering, biomedical developments and Sci-Art, and I was particularly interested in the examples which looked at animals and ways to help animals.

I have started to look into small biomedical engineering projects to find inspiration for my own project. Some projects were to make fairly normal devices, like a digital thermometer or hearing aid, but some sounded more interesting and unheard of.

One of these is an emotional stress indicator, which is a device that shows when the user is experiencing a high level of stress. It does this through LED's and beeping when the stress level is high. It works on the idea that the resistance of the skin is lower when stressed, and higher when not. This is due to the blood supply to the skin. The device would work by using pads attatched to the skin to monitor resistance levels.

Another project was a sleep inducer, which aims to help people suffering from insomnia. The idea behind the device is that geo-magnetic fields can be used to help make an environment which will aid sleep. The device generates these geo-magnetic fields.

HTML5's Geolocation and Maps

I finally got Geolocation working on my website! The only problem is, I can't find a way to display my markers from Google Maps on the Geolocation map...

This is the map with the Geolocation feature.

And this is the map with the information!

I think I'll be removing the geolocation map to make the site look good... It's a shame I can't combine the two maps, but this is only meant to be a simulation after all...

Developing the Site - HTML5 Features

In my website I have used a few HTML5 features. I've used a few tags / elements such as <header> which has more semantic value and streamlined process than <div id ="header">.

Another thing I have looked at is the transition element, and the use of hover. Hover means that when you place the cursor over the button to be clicked on, it will change something about the button. In this case, the button changes appearance, becoming lighter in colour. The transition element also makes the button 'rise up' from it's original position (see below screenshot for an example).