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.