html5 website research

All the websites have used html5 in a unique and cool way. They are the best part of HTML5 and gives a good example of how HTML5 can replace flash.

Stickman

This website is one of my favourites. It allows the user to draw stick man and then interact with the animations throughout the story. For example it asks you to draw keys, balloons, swords and rainclouds. It is very rare to see an animation with so much user interaction and even lets you personalise it with a message before you share it with your friends. I believe that this really is as cool as HTML 5 get.

http://www.drawastickman.com/

Spiderman


 This is an animation of Spiderman. It gives an example of the kind of animation that can be done just using HTML 5. The cool thing about this is that because there is no flash it becomes more assessable to ordinary people. You don't have to be a flash expert.

http://www.optimum7.com/css3-man/animation.html

The wilderness downtown

 This is a really cool HTML 5 website. It allows you to put any postcode into the search and it will show you a man running towards the postcode. I have entered my childhood home and as you can see in the top right hand corner is a picture of my parents home. Then you have an aerial view on the left-hand side and below is a video of the man spinning around as the camera moves. This is really clever website, I like it because it becomes very personnel when you enter where you live all your childhood home address. The HTML 5 in this website connects with Google maps allowing them to retrieve all the photos of the address.

http://thewildernessdowntown.com/

Comic


 This website is like an online comic book. The cool thing about this, is that it gives a 3-D effect. The writing jumps off the page. Also it makes it really easy to navigate, all you have to do is just growing mouse along and automatically moves to convert for you. Then when you wants to read a page you just hover over.

http://www.nevermindthebullets.com

Orbital Developments

 Now this website is using a feature of HTML 5 that is extremely popular. It has all the website on one page. Then when you click the links it takes you to a different section of the page. Another thing I've noticed about these types of websites they seem to have an animated look. There's something very simple about having all the information on one page.  This would be good for people who struggled to navigate through websites and struggled to use the Internet.

http://orbitaldevs.com/

HTML5 feature research

 Video effect

 As you keep in the picture below the video effect is the beamed of light at the back of the video. These light change colour depending on which part of the video is playing. This If the cool feature that uses the <video> tag. The only downside is that it can distract from the video itself.

  Circler Photo Viewer

This is an photo viewer that allows you to rotate through photos. When you click on a photo it uses 'light box' to make the photo bigger so the viewer can have a better look at the photo. The cool thing about this viewer is that the photos are set in a 3-D circle. You can see the photos even when they're at the back. It also gives the user good interaction with the photos and which ones they wish to view. 

 

   Grid photo viewer

 this photo viewer differs from the other one because this one is set out in grid form. It is very easy to see all the photos at 1st glance. When you hover over the photos it make them pop out, giving them a 3-D effect. Then once you click on them it uses 'light box' to display the bigger picture. This is a much more basic way of displaying the pictures.

Animated Visualisation

 this is an animated visualisation of twitter posts related to HTML 5 and CSS 3. The user can interact with the dots by moving the mouse around the screen, the dots move away from your cursor. You can also click on any of the dots showing the twitter post that is connected to. This  Is a good example of the <canvas> tag.

 

 Editable Animation

 this animation that draws this pattern over and over again in different colours.  The interesting thing about this animation is that the user can edit it. They can control the speed, the colour and even the shape is. This is something that includes user interaction with animation, showing off the best features of which HTML5. 

 Geo-location

This is a feature which allows the computer to find where you are viewing the website from. This is a really clever feature because it polls in data from Google maps. You can keep a record of where people were viewing your site from and see which area you were most popular. 

 Sliding pages 

 another cool feature in HTML 5 is sliding pages. As you see from the picture below you have the page and use the arrow key to transition from page to page. 

Initial idea and design

I decided that I wanted to create a personal website. Once I had decided this I decided to draw up designs in Photoshop. The pictures below are what I originally wanted my website to look like. On homepage I wanted a animated background where flowers and swirls grew. This was how I was going to use the canvas tool. Another feature that I wanted to use the local storage I was going to get people to rate my photos and displaying the top 8 on the homepage.

 

 On the portfolio page I wanted to use video tags. This page would be a simple display of videos and photos of the work I had undertaken at University.

 The gallery page I wanted to create a simple photo viewer so you can scroll through my photos and decide which way your favourites.

 on the contact page I wanted to include HTML 5 form, geolocation and a drawing pad. I wanted the geolocation to direct people from their addresses to me. I also wanted to include a drawing pad still people could draw messages instead of writing them.

This is a mind map of all the HTML5 feature I want to use planning to use and a description of what my killer app will be. 

Understanding: data and visualisation

Critique the design: what works what doesn't


This is a visualisation that demonstrates the popularity of trends on Twitter. Depending on how popular the topic is, depends on how big the circle is. I think the look of the circles and the different size meaning different popularity. Another this I do like, is that when you click on the circle it brings up the information about the topic. However I think visually it is not very appealing. I think the dull gray makes it look very boring also I do not think there is a need for the number.

http://infosthetics.com/archives/2011/12/follow_the_hash_tag_dynamic_bubble_graphs_of_tweets.html

Sketch a redesign to improve the visualisation

I have redesign the visualisation so that it is very bright and colourful. Which makes it more appealing then the dull gray colour it was before. I have also taken away the number because it is not clear what the number mean.  

Final design and features

My final design is completely different to my initial design.  Instead of a animated background I have used a photo, which has a transparent black box for all the content. I believe this design is more professional and eye catching.

 I created a splash page which had a animation from using the program Edge by Adobe. This is meant to be the new version of Flash, you create your animation and it automatically saves in HTML 5 form. I decide to creative the animation around my logo. I have also used the local storage on this page, getting the user to enter their name and for it to be remembered on other pages of the site.

On my homepage I wanted to create something simple. There are a number tags that are used throughout my website such as the <nav>, the <header> tag and the <footer> tag. The nav tag controls my navigation, the header tag is used for my logo and the footer tag is use for my copyright. I have included the user's name and also a photo slideshow. The photo slideshow uses the <canvas> tag.

 The idea of my portfolio page basically stayed the same. The page displays videos and pictures of nearly work I have done. All the videos users are <video tag>.

My portfolio uses the <campus> tag to greyscale all of my pictures and when you hover over them they become coloured. A feature that I think is really cool. Also when you click on the pictures it uses lightbox to view a bigger version.

This as I finished contact page I have included HTML 5 form, which uses tags such as <required>, <e-mail> and <autofocus>. I have also included geolocation so it can locate where in the world people are logging on from.

The semantic Web and killer app

When we were 1st introduced to the semantic Web I struggled like many others to understand what exactly it was. I undertook lots of reading on the subject area, however is it was not making the definition any clearer. Then one day I came across a video on YouTube and it explain to me exactly what the semantic Web was and what it could do.

http://www.youtube.com/watch?v=OGg8A2zfWKg

So from my app I originally decided to make a photo collards of people who had visited my website. As far as I'm aware this currently cannot be done because unless the photo is tagged they cannot tell who is in the photo. When I started to think about this I decided that it is very similar to the face recognition software Facebook uses. So I decided to change my idea.

For my new app I decided to create a photo search. Instead of searching for photos, you search inside the photos of the certain objects. This is currently not possible because the web can not recognise objects without being told what is. So for me to make a mockup I had to use XML to simulate the search. And how this works if you set your keywords, it then looks in the XML database for the keyword and replaces the images URL. This means I had to create the photos before, I used a photo I had previously taken in the summer.

   Orignal photo

 person in colour

 The lighthouse and colour

  The flags in colour

 The statue in colour

 The cars in colour

For my app I decided I wanted to create a real feel mockup. I decided that I would make it look similar to Google and this then gave me an idea for the name, Picoogle. The picture version of Google, so I set out to create a logo. Originally I wanted something that was many different colours, however it just didn't look right so I settled on blue. As you can see below this is my finished logo.

For my final design I made my Picoogle search look similar to Google. Which is a very basic, clean design. I also included instructions of what my search was meant to be. Then at the bottom of the page underneath my picture I declared that this is a mockup and it only works with certain keywords. The keywords are person, Lighthouse, statute, cars and flags. If the keyword is not found it brings up a picture saying 'sorry search not found', as you can see below. Also below is a screenshot of my finished and what it looks like.

Reflexion

HTML5 was harder then I expected, I originally thought that it would be simple because HTML is know to be easy.  It has lots of nice features, my favourite one being the black & white photos into colour. Also using the Edge programme to make HTML5 animation was really fun. It made it easy to create working animation and for someone who did not get on with flash, it is a relief. I would highly recommend flash to anyone building a website. The only downside of using HTML5 is that, it is to difficult to find a browser that supports all the features but as it grows in popularity (as I believe it will) this problem will be resolved.

What is Argumental realty?

Argumental realty is a type of virtul reality that aims to create aspects of the worlds envierment in a computer. An augmented reality system allows a user to take in information (such as a photo) from the surrounding area and the computer adds additional information. This is designed to enhancce the users experience of the world, allowing them access to information (such as 3D models, old picture, mesurment ect) they would have never know before. Augmented reality is used in many industries today such as entertainment, military training, engineering design, robotics, manufacturing and others. Argumental realty brings something new and unquic to each of these industries.

Mockups

Storyboard

This is a storyboard of how our project will work and all the different platforms we will use. The beginning part and the end part will not be the same but it will be very similar. The most important part is what happeneds inside the PC.

Flash Animation

This is a mock-up of our project done in Flash.

This is not how exactly it is going to look like, but it should give you a pretty good idea what it is about.

Mash-up Mock-up

This is a mock-up using various bits of software to show the different parts of the system. This shows a physics simulation of how the in and out parts may turn out with a mock up of the computer side of the project made in after effects.

Argumental realty

For are argumental realty project we had to take a 3D object and put it in a programme called Junaio. Which adds all the things needed to make the argumental realty. The first thing I had to do was find a 3D object. Which was very hard because the programme can only handle very simple shapes with not many surfaces. Why we are using such a out of date programme is silly to me.However after hours of searching and I mean hours! I finally found a shape that was small enough that I could convert to md2.  Below is a image of my 3D object converted.

Once the 3D object is converted, we then had to upload it to a programme called Junaio which is very fussy to the least. Trying to find textures and tracking images for this programme to take is not a simple task. But once I had found one that it would accept I uploaded my object put a beige texture on it and a photo of people crossing the road for the tracking image.  You can scale and move around the image using the sliders at the bottom of the example. Once I was happy with how it looked I created my argumental realty.

This is my final project. To be honest I do not understand why anyone would want to create or use argumental realty. The idea sound really good but putting it into practice is horrible. I do not know if it was the way we were taught or if it really is this bad. But I can think of some many other things that are just as good and are so much simpler.

Interaction

We have been given 3 task from the lecture, each of these task relax upon what was covered in the lecture.   


Task 1 - Select 2 websites and analyse the bad design


This is a poetry website called Sixties press. The design for this website is shocking, it is all over the place. The first issues is that there are to many colours with in the same website, every bit of text is the same colour. Another issues with the website is that they have put black boxes behind the text which makes it very hard to read. Also the header design is horrible and very hard to read. The alignment is all to the left hand side, so nothing is in the middle of the page. The last thing about this website I dislike is the background I think it look really old fashion and does not suit the rest of the website look. To be honest looking at this website gives me a headache.   

http://www.sixtiespress.co.uk/

This is a website to recruit high school girls to go to a Greek college. This website is very unclear of what its purpose is. There is too much writing on this webpage, even though once you read though it all your still unclear what the website is meant to be showing. The boxes are all out of line, which look   dreadful. Also the menu is way to small, its very hard to find and move though the site. Another thing I do not like about this website is the fact there a scroll bar and you can scroll though one pannel on the home page. 

http://www.rushbiddies.com/

Task 2 - Describe the interaction framework that will be used in iPad 5 

I believe that the interaction framework for the IPad5 will include such thing as voice commands, eye movement and hand gestures. By this point in time technology will be so advance that people would of become lazy in the uses. They will want to be able to control the device without to much effect such as voice command and hand gestures.

Task 3 - Analyse all you know about natural language interfaces


Natural language interfaces are becoming more and more popular in devices today. Of course as they get more popular more issues will be raised around the interfaces. The main problem with the natural language interfaces is that it has a really issues understand what people say when they have accents. This makes the technology unusable by most people around the world.  
  

Reflection

Group work
The group work, overall, was pretty good. There was a slight issue with getting both groups together as the lecture times were completely different. Having the sessions moved to a Wednesday helped since the stage 1 students could go to the earlier one and meet with the students from stage 2.

With the actual work, we got the stage 1 students to focus on the blog, design and the real world parts while the stage 2 students were tasked with writing the code for the computer system and arduinos.

The board game

The board game we based our installation on made for an interesting project, and with further development, could continue into other computers; there is possibility to jump from machine to machine using both real world and virtual methods.

Going from the original idea of Mouse Trap being the board game to a Rube Goldburg machine that goes from the real world to the virtual and back out is something that, as far as we know, hasn't been done before. There have been computer based Rube Goldberg machines, but none that interact in the way we have done it.


The installation
The installation was a bit of a pain to setup, thanks to the many parts we were using. Once it was setup and we ran a few test runs we were confident that the final run would go smoothly enough to capture on video for presentation.

What we liked
The machine is very awe-inspiring. Getting it up and running was a pain, but once it was fully running it was exciting watching each part knock together. We also liked how we had setup the real world part of the machine, because it was the hardest part to visualise for things like mock-ups. In the end it turned out very well.

What could of been improved

Communication could have been improved vastly, and was one of the more troubling parts of this project. With better communication, the project time scale could have been vastly improved.

What we have learnt

We have learnt that organization is very important, as each of us had other commitments we needed to attend to so could not always turn up to meetings. Some members of the project had work, so some days had to be missed because we could not get everyone together to work on it.

Website design

So this is my finished website. As you can see I have kept the header, menu bar and background the same on all the pages. So I have decided to put two photo on this page with my main body text in the middle. I did this because I liked the thought of having a picture of me now and one when I was younger. As this is represents me moving thought life. It made sense to me to put the text in the middle of the two photo I think it gives me a nice layout. As you can see I've carried over the text box styling from the form. This allows my text to be read easily.

When my home page loads it play a song. This is my favorite song and the reason I wanted to use this feature is because it provides more information about me. The reason I have chosen the song smile is because I feel like I really relate to it. I have been though many sad and unhappy experience and this song really relates to how I felt. It is very much me. No matter whats going on I will always try to keep smiling. I think this is a really nice feature for my website. However I had to take this feature off because I could not get it validated by Cynthia Says.

(Finished Home Page)

When I first design this page I used the same code as I had for my first page but I was trying to put more then 3 div onto one line. I couldn't believe how hard this was. Then it suddenly occur to me that why could I put them all on the same div. So this is what I did. I picked out 5 of my favorite card design and put them onto my page. I decided that I did not want my website to have to have a scroll bar. This is why I only picked 5 images. Then I just put a single line of text along the top of the page explain the page content. Again using the box outline for my text.

(Finished Cards)

My final form design hasn't changed sense I decided that I would put a text box around it. I really like this page I think it is very elegant. It also gives you a real chance to look at the background better. The thing I like about the boxes around the text and the form is it really makes them stand out. Which is good because these are the most important bit of my website.

(finished form)

Paths of desire

Introduction

My final project is to do with invisible architecture. I had to make a model that was an example of invisible architecture. Before I could do this I had to understand what invisible architecture actually was. Invisible architecture are tracks that are left behind without realising that they are there. Example of this are: the most commonly walked routes in the shopping mall, the different temperature in a building caused by where people are most, where phone signal are strongest and weakest, or where people walk in the park. All of these are paths people leave behind and for my final project I had to choose one of these paths and bring it to life.

Idea

For my final project I choose to do my first idea. I decided I would map out the paths of a Park. Once I have mapped out the main paths, I will then map out the desired paths. The path people want to take. I will map the main paths in red and then the desired paths in blue. I will use GPS drawing to map out the paths. This will show what the paths should look like to best fit the desired path.

The park I originally choose was central park however as I started tracking the park I noticed that the signal was very weak and I also kept losing it from time to time. Down in the lower part of the park I could not pick up a signal at all. This caused me great problems, without being able to get a signal I could not complete my track of the park. Also I soon realised that this park was too large for me to show the detail I wished. So I decided to change to St Jude’s park. This park was a lot smaller and would allow me to show the details I wanted to show. Using this park would also give me the opportunity to be more precise with my mapping and make sure it is tracking me correctly.

The process

I started by walking around the park, I walked all the normal paths in the park. These paths were well laid out and you could tell that the person who designed the paths had really thought about the best place to put them. After I walk all the paths in the park I then walked all the paths of desire these were the faint paths on the grass (where people had worn it down from walking) and following where people were walking in the park. Once I got home and uploaded these paths onto my computer I realised that the tracking was off, it did not show which paths I had walked. So I decided to go back to the park and do both the walks again. I decided to walk slower and make sure it was picking up where I was. The paths of desire track came out much the same with only with a few differences. But the normal paths were a great improvement. My tracks match the paths I had walked.

The technology

I used a hand held computer with the Pathway software to track my walk. The equipment was not very clear and I wasn’t sure if it was actually mapping where I was walking. I could see that it was counting the amount of time I was walking and that the direction I was walking in (north, south, east or west) was showing up. When I changed direction so did the arrow.

The longitude and latitude was also changing, and this indicated that the GPS was registering me. However, there was no indication as to whether or not it was drawing my route. I was only able to tell this when I upload the routes to the computer. I uploaded the route and it had tracked me walking, however, the track was not where I had walked. This may have been caused by a number of factors such as the signal strength dropping and losing of the signal altogether. When I did the tracking again I kept a close eye on the signal strength and it stayed the same all the way around. This tracking was a lot more reliable. I have very mixed feeling about the equipment. When the equipment works it is a very good, however you need to leave enough time to complete the tracking more than once to make sure it is precise and that it follows the paths.

The images produced

First attempt at tracking

As you can see from looking at this track it does not match the paths very well. Even though I walked them exactly.

This has pretty much tracked where I have walked. Even if not correct it would not stand out very much because it isn’t something you can see on the map.

Second attempted at tracking

As you can see this track follows the paths a lot more accurately. There are still some mistakes with the tracking but this is a lot clearer then my first tracking.

As you can see this second tracking for the paths of desires are pretty much the same as the first one. The only difference is that I have tracked more paths this time by observing where people were walking and the most popular routes.

Paths Compared

This image shows the two paths on top of each other over the map. As you see the blues lines and the red lines do cross at certain points. From looking at the picture most of the paths of desire cut from one exit of the park to the other. This indicates that is park could be used as a cut though, to try and make a journey shorter.

Wire Frames

Paths


Paths of desire


Paths Compared

These are call wire frames because you can only see the outlines. These are my tracking of the park. From looking at them from this view you can notice patterns start to form. You also get a better idea where the paths cross over when they are places on top of each other.

Conclusion

My conclusion is that the paths in this park are well designed. Most people walking thought the park stick to the main paths, so it is clear someone put a lot of thought into where to put the paths. However there are still a number of path of desire. There are improvements that could be made to the paths. They could follow the pattern of my paths of desires more. Also there are lots of paths that circle small parts the grass. This seems a bit pointless as both paths lead to exactly the same point and run alongside each other. It would make more sense if they just had one path and made use of the extra grass that this would make available.