Big lesson of html

Heavy day today! Asked George about navigation, and ended up pretty much getting some personal tutoring for a couple of hours with Dean and Shaqil, which was pretty useful.

We firstly created a grey box to put everything in, the inserted the required wording.  He took us through copying and pasting the initial tags from html shell, then where to go from there. We started out by putting in the initial wording for the navigation, which started out as a bulleted stack on the top left.  George then showed us, that if we copy and paste a bunch of html from http://meyerweb.com/eric/tools/css/reset/ , which allows you to take out default settings.

We then went on to align the text along the top, so it was all in a row, Create boxes around the text in a different colour, turn them into links, then change the colour of them when the pointer is hovered over them.  We then went onto learning how to change the font via Google fonts, which was probably the easiest part!

I'm still no where near the point where i'm properly remembering much, which is annoying, but its just so vast.  I don't doubt i will figure in time, but its hard when you got other stuff on your mind, e.g. Barcelona!

At the end of the day, i started a few sketches on layout of the actual web pages i might use, getting some inspiration from the sites i looked at in the previous blog.

First few lines of html

Finally learnt today what i was so confused about before, which was how to get a html page up and running, e.g. what you would see online once it has been published.  Jasper showed me how to copy and paste a from html shell (http://www.htmlshell.com), and where to put in things like titles, headers, body text etc.  As it stands i only have 2 lines of a web page, but its a start!

Unfortunately, last week when we were having lessons on html, they were just moving too fast for me to keep up with, but i understood a few things, i just needed to stitch a few things together in my own time.  Also I've found a few sites which are useful e.g. http://www.codecademy.com, which should make things a bit easier.  I remembered swell today about the 16 columns rule that i need to remember. And to check on http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php to make sure characters are going to work on html.

Andrew reminded us of the age group this site is aimed at (15/16 year olds), which i didn't think too much about when i did my ibook, although the ibook is not too bad, but maybe a re jig of the fonts i used, to ones that are a bit more appropriate.  I based the fonts before on modernity, and the grace and majesty of glaciers.

Beautiful websites

Today i had a brain wave.  I thought, why not just type in 'beautiful websites' in a google search.  Great idea!  First result was a page called Very Nice Sites (http://www.verynicesites.com).  The first site it showed was for an app called Pomodrone, which appears to be some sort of scheduling app. 
This site is small, but great.  It uses the downward scrolling gesture, which is a natural thing to do, to change pages, but there is an animation to do so http://www.pomodrone.com.  As you can see from the screen shot, simple pastel shades are used, with no overly complicated graphics, giving a very modern feel-

Im very drawn to this style, not only for its contemporary feel, but also as a beginner on html, it doesn't look too complex! Albeit, the swipe animations are probably a bit of a nightmare.

The next site i looked at was Mixd (http://www.mixd.co.uk).  This is actually a web design company's own site.  Again its style is very contemporary, with bold background colours, in more standard colours like yellow and red, with black or white type-

This style continues throughout the site, apart from the section on the team, but even so, its still very simple and modern looking, and fits with the rest of the site very well-

This page reminds me of a site i looked at for the ibooks project, image on one see, with text on the other, which i really like.  The quality of the photography is also very good, obviously done in a studio, which is important for this type of thing.

The next site was interesting to me, as it was for a mountain bike brand, which if you didn't know, is one of my main hobbies.  Its for Juliana bikes (http://www.julianabicycles.com).  This site goes with photography being the main theme, with minimal text over the top, which i again think looks great.  Like i said in my previous blog, simplicity is the key in my opinion to a successful, and aesthetically pleasing site.  The home page looks like this- 

You navigate through the site, with the obvious white arrows at the bottom of each page.  Each page also has a link in the middle to take you the more detailed parts of the site-

And the link takes you to this-

Again, still simple, with all the bikes pictures being shot at the same angle, which gives some uniformity.

All this has certainly given me some good inspiration, and kind of wish i'd thought of this before i done the ibook, oh well, better late than never!

Day 1 website design

So yeah yet again, not too sure how i feel about this one.  Definitely interested how to build a website, but the coding thing just looks like I've got to learn Japanese!  
I also didn't do anything over the easter holidays, for various reasons, one of them being that i just did not have a clue what i was meant to do!  But alas when i got in to the classroom yesterday, i was put at ease by realising we had more time to do the project than i realised, obvs though Barcelona is gonna get in the way a bit!

Yesterday though i thought i should start doing something that i was a bit familiar with, which is analysing existing sites that i think work well, or don't as the case maybe.  I started off with the one that for me, stands out above all others for sheer simplicity; Tumblr.  I love the simple interface, and lack of clutter.  So i sketched out the page layout, marking with arrows where all the places of interest were, e.g. navigation, log out etc.  It was quite interesting to look at a website in so much detail.  There is very little in the way of things to click on, and where they are, they are just big icons, which clearly indicate what they are designed to do, like a small silhouette of a house to designate the home page, and a silhouette of a camera to designate the picture posting facility.

I then looked at another site which i use a lot, that i never have a problem navigating, which is DeviantArt.  This is a fairly similar site to Tumblr, but is definitely busier to look at, and has ad banners.  But still easy to use, with navigation across the top, and down the left hand side, which stays the same on any page you go on.

In the afternoon, we had a lesson on coding from George.  I learned a bit about what tags mean what etc, but as the afternoon went on, and i started to tire, i really struggled to keep up.  But i think over the weekend i will look at youtube and see what i can figure out myself, and maybe talk to a friend of mine who is a web designer.

Final Day

Over the last week i have been fine tuning my ibook, double checking spelling etc.  I done some use testing on a friend, which went well.  She didn't have any overwhelming issues, only the size of the fonts on some pages which are slightly inconsistent, which i will look at.

The last thing i needed to do, was put in some google maps widgets.  This turned out to be a fairly complicated process, as the exact location of the glaciers is not on google maps, so i had to find them via info on some web pages related to the glacier itself.

This is one of the pages with a google widget on it-

Overall i'm happy with what i have created.  I have put in a fair few interactive items which work well.