final thoughts

I am pleased with the progress that i have made using html, I am now confident in creating a webpage and understanding html coding.  i can now read coding and know alot of what it means.  It is no longer a "foreign" language to me.  i would feel quite happy now creating a website now from html.  i have learnt the bulk of my knowledge from html tutorials online, i found these helpful as i searched for the solution to a problem i had when i encountered it.  for example when we wanted to have music playing in the background for our site we searched for this on goole and found the solution to our problem and learnt about embeding videos and audio into a website using html.  

i feel like i have done a complete turn around form being a complete beginner to html i have at least become intermediate at creating html. The reason for not being a pro at the end of the project? html is incredibly anal, with having everything perfect for links to work, pictures to appear, music to play, things to underline etc etc.  It is a massive subject and couldnt be mastered even in the huge time we had for the project. i am excited about our final website as i think it looks the really good and has come such a long way since the very beginning of the idea of using trains as a basis of our design.  My favourite part of the website is the iframes and the drop down menus.  These things look very simple but are quite complicated, especialy the drop down menus.  These things make the website the way it is, an interactive site that i think is very readable and hopefuly enjoyable to viewers of the internet-human-body.com.

Adding something special to the website

We felt that after phil saying that our websites need to be more than just images and text that we should experiment with background sounds on our pages.  i think that this is a good idea.  we have added in the coding for the sound on the website and it works a treat here is the coding.


<embed src="Tainsound.mp3" autostart="true" loop="true" hidden="true" volume="50%"></embed>


We have set the volume to 50% because we didn't want to overpower the viewer with the sound. We are also going to put a sound loop on our homepage, of a tannoy that welcomes the viewer to the website.

TBALES?!

Here is me trying to create our website in tables in html as you can see tables are usually used for very simply designed websites like facebook where everything is, well in tables or blocks.  For our website we wanted it to look different and to achieve that we needed to use div tags to place everything in the right place correctly and know that it was always going to stay in that place.  The use of iframes aswell to fill the box in the middle was key as it adds like the title suggests an interactive edge to the design.  We are going to keep to using the the coding we have already, as like i explained it is key to our website design.

TROUBLE?

So georgia, one of the group members, had a problem that none of us could solve so she went to pete for some help with it, he looked at our coding and said that it was far too complicated, which is annoying as we have all spent so long inputing into this website and to be told that we were going to potentially have to start again was devastating especially as we only had like two days until the presentation!

Pete suggested that we used tables instead of div tags that place the things we needed in exactly where we wanted. We had a workshop lesson on tables when we had the html workshops with pete so i shall digg up the notes for that and see if it is plausible doing it again. Petes argument was that it was that it was easier and the simpler the html the better.

Welcome video

Here is the welcome video, i am pleased with how it has turned out, we felt that we wanted a light hearted feel to welcome viewers to the homepage.  We gave it a feel of an old public information film with the use of diagrams, and an old film effect.  I also voiced the video, which was a bit embarrassing but it made the video, the right sounding voice with the right graphic has made it look authentic i think.  This will sit on top of our homepage and will be set to auto play in the html when the viewer goes onto the site.  This was a rather good bit of coding we found that allowed the video to be played automatically.


embed src="http://www.youtube.com/v/5Rjg2qVPRok?hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="340" height="230"></embed></div

highlighted in green is the little add on you add for it to autoplay.

Drop Down menu DRAAAMMMMA!

We have had the decision for a long time to make on the page navigation, whehter to have all links to all pages on the side at all times or make the viewer go back to the homepage to then prgressivly go to each page.  I think we have decided as a group to go for a drop down menu on the side for each part fo the spine.  This is a good idea but incredibly hard to achieve.  From searches online the only ones i can find are very simple menus or incredibly over complex ones that can only be achived through something like dreamweaver which of course we are not allowed to use.  i will continue to see if i can find a tutroial on how to create a drop down menu or if there is a way to edit the drop down menu i have found to make it more attractive looking, please see the example image on the cervical link on the left.

Crimple Crumple

We as a group decided that the tiles had to go and we had to change up the design slightly to make it look even better, which are what peer review sessions are there for.  i have attached the new design on here, we have also added a crumpled effect onto the pages with a slight "dirty gradient".  This is because we are trying to reproduce the old london undergound poster.  The london undergeound is famous for its big posters, advertising all through out history and we felt reproducing this effect will add even more connotations of the london underground and more importantly trains.  You can see the dramatic enhancedment of the page already without the paper texture.  But with the paper texture it looks even better. You can also see the homepage that we have done the effect to aswell. I think this will make the website more visually interesting and less boring for viewers. 

new design?

We had a peer review session yesturday, it went well with a few good comments but soem useless negative comments like it looks like a underground toilet. Which is a completely useless piece of critiscism.  So from this we decided to get rid of the tiled background and restructure the page as Simon had sed that the navigation bar on the side seemd to big and drew your eye away from the main content.

Then one of the group members said that we should redo the whole design of the website after i had taken ages to do the coding in the eater break.  This made me annoyed as i saw how under apreciated my hard work was.  I viewed my opinion about this and managed to persuade them to keep the bulk of the design and just change it a little bit of it.  One of the members said that the perr review session felt like a wake up call.... i think this just shows how much they have under estimated there time that they have had to do the website.

Coding for the homepage

Here is a screen capture of our homepage, i am pleased with how this looks, the background image that vicky in our group has made i think needs to be a higher quality and we we are back after easter i will get the high quality file off of her and insert it into the coding.  We also need to put in our video that we have made, which will go where the video is on the screen capture.  Our bio will be in the place where the key is on a tube map.

Here is the coding, i have added in dummy links so when we are al togerther and have put together all of our files then we can put in real links, that only have to be copied and pasted because the links are already are there.

<HTML>
<TITLE>The Spine</TITLE>
<BODY>
<BODY BACKGROUND="MOCK UP VICKY HOMEPAGE.JPG" STYLE="background-repeat: no-repeat">

<FONT FACE="century gothic" SIZE="4" COLOR=000000">

<div
   style="
      top: 100;
      left: 30;
      position: absolute;
      z-index: 2;
      visibility: show;">
<a href="cervical front page">
<font color="#000000">Cervical</a>
</div>

<div
   style="
      top: 30;
      left: 1240;
      position: absolute;
      z-index: 2;
      visibility: show;">
<a href="cervical front page">
<font color="#000000">Thoracic</a>
</div>

<div
   style="
      top:590 ;
      left:390 ;
      position: absolute;
      z-index: 2;
      visibility: show;">
<a href="cervical front page">
<font color="#000000">Thoracolumbar</a>
</div>
<div
   style="
      top: 380 ;
      left: 1310 ;
      position: absolute;
      z-index: 2;
      visibility: show;">
<a href="cervical front page">
<font color="#000000">Lumbar</a>
</div>

<div
   style="
      top: 50;
      left: 429;
      position: absolute;
      z-index: 2;
      visibility: show;">
<iframe title="YouTube video player" width="200" height="200" src="http://www.youtube.com/embed/0lq2k7rmjdY" frameborder="1" allowfullscreen></iframe>
</div>


</BODY>
<HTML>


Also i think we should change the orange "tube line" on the n to another colour as there is not an orange tube line in london.

SUCCESS AT HTML CODING

So i am rather pleased with my self as i have had quite the success with the html coding for our homepage and the individual pages.  I overcame the problem i had in the post before, and this was simply due to me being an idiot and not putting .html at the end of the filename. 

Heres the coding for our inidvidual pages:

<HTML>
<TITLE>The Spine</TITLE>
<BODY>

<BODY BACKGROUND="page design bluelive.jpg" STYLE="background-repeat: no-repeat">

<FONT FACE="century gothic" SIZE="9" COLOR=000000">

<div
style="
top:120 ;
left:850 ;
position: absolute;
z-index: 2;
visibility: show;">
Cervical
</div>
</font>
<FONT FACE="century gothic" SIZE="6" COLOR=#000000">

<div
style="
top: 170;
left: 229;
position: absolute;
z-index: 2;
visibility: show;">
<a href="A LINK FIRST SECTION" style="black" title"Cervical"><font color="#000000">Cervical</a>
</div>

<div
style="
top: 305;
left:190 ;
position: absolute;
z-index: 2;
visibility: show;">
<a href="A LINK SECOND SECTION">
<font color="#000000">Thoracic</a>
</div>

<div
style="
top:465 ;
left:217 ;
position: absolute;
z-index: 2;
visibility: show;">
<a href="A LINK THIRD PAGE PAGE"><font color="#000000">Thoracolumbar</a>
</div>

<div
style="
top:620;
left:225;
position: absolute;
z-index: 2;
visibility: show;">
<a href="A LINK FOURTH PAGE"><font color="#000000">Lumbar</a>
</div>

<div
style="
top:-23;
left:1200;
position:absolute;
z-index: 2;
visability:show;">
<a href="homepage real.html"><IMG SRC="the spine logo.gif" border="0"></a>
</div>

<div
style="
top:200;
left:600;
position:absolute;
z-index: 2;
visability:show;">
<iframe src="frame1.html" width="810" height="550"> </iframe>
</BODY>
<HTML>

You can see that the div tag has worked really really well and has become quite the life saver with all the website as we needed things to be exactly in place on every single page.  One problem i had when i added the links in to the words on the side of the website, the navigation bar if you wish, was that once you put in the "a href" bit they turned a horrible blue tht didnt match our site.  I overcame this problem by finding out how to change the colour of links, i changes this blue to a black that i felt was suitable.  For ease and quickness in the coding i just added in Black instead of #000000 as i felt this was easier for the other group members to discepher in the coding.  Now that i have worked out the coding for the individual pages, i have shared this coding in our group on facebook, so that everyone can use it and put there work into it.  The image attached to this post is the website, with the iframe in and all the link s set up,

EASTER

Our group seems to be divided by distance, as two of our members live in the north birmingham and doncaster and the other two which includes me live in london and the southend.  This is tricky whilst trying to create a website with html coding, it seems so far.  The spreading out of work is hard to do aswell.  I started the html coding for out individual pages, which went well and solved my previous problems with something called a div tag which places something exactly where you want it on the page.  i then got stuck as it wasnt responding to what i wanted to put in so i posted it on our face book group that we have created.  this seems the easiest way to share work and for members of the group to see and share ideas. 

PROBLEMS SO FAR WHILST CODING

Here are a list of problems i have incountered whilst trying to code my individual pages..

1.  The Spine logo gets distorted when the navigation bar is sized to fit the computer screen.

2.  Making the page scroll down [can be solved by making text box a frame and having the box scroll down SOLUTION!!]

3. Spacing out the links to match the background spine and line.

Group ideas

Working as a group is difficult as everyone has loads of ideas and then after youve chosen an idea you have to delegate work to each member so it is fair.  So far in the group i think the design for the website  has been split fairly, we all have contributed to the homepage and have contributed to each others designs for there personnal pages and the website identity.

Group work

The best thing that we have done as a group is to make a private group on facebook to share our thoughts and ideas.  The best thing is, is that you can upload images and documents to it and everyonegets notified when this happens.  So you get a fast response.  Also you  can see where everybody  in the group is at, with there designs for there pages and if you have a problem you post it in  the group and all the members can try and solve the design problem for you.

some scans from petes coding workshops

Coding for website

So i sat down today and started the code for the website.  The main problems i found was to make the background image fit the screen.  The second was the place the video where i wanted it on the page and not just plonked anywhere.  Also we need to have live links on the homepage that look like they are part of the background image.  I do not know how to do this, so will have to investigate.

GROUP WORK

We have sorted out the hompage now and the design it just needs to be created in photoshop or illustrator, and we have sorted out a design the continues through all our web pages.  But I do feel the need to meet up more with our spine group and get together and create more work for the website as i do not want to rush through it all at the end!!

web graphics

Start of any website
<HTML>
<HEAD>
<TITLE> Web graphics </TITLE>
</HEAD>
<FONT FACE="VERDANA" SIZE="7" COLOR=000000">
<CENTER>
<B>YELLOW DUCKS</B>
</CENTER>



Code for website background, using the horizontal bar to panel down instead of using a large block of colour because it would slow down the website,
<CENTER>


</CENTER><BODY BACKGROUND="horizontal.gif">

<A HREF="http://www.google.co.uk">

<IMG SRC="duck.png">  THIS IS TO INSERT A PICTURE, ABOVE A LINK, SO THE CLOSET THING TO IT WORD OF PICTURE BECOMES A LINK 

</A>

</FONT>
<FONT FACE="GEORGIA" SIZE="3">
<P><I>Yellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow</I> <br>DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow<br> DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow DuckYellow
</FONT> SAMPLE TEXT


<A HREF="http://www.google.co.uk/images?client=safari&rls=en&q=rubber%20ducks&oe=UTF-8&redir_esc=&um=1&ie=UTF-8&source=og&sa=N&hl=en&tab=wi&biw=987&bih=993> LINK
<FONT FACE="GEORGIA" SIZE="8">
<B>DUCK</B>
</A>
<CENTER>
<A HREF="http://www.google.co.uk/imgres?imgurl=http://s3.hubimg.com/u/1417910_f520.jpg&imgrefurl=http://hubpages.com/hub/The-History-of-the-Rubber-Duck&usg=__MtIdPy0TpaR_52C4QhWtmZEz-uw=&h=390&w=520&sz=25&hl=en&start=67&zoom=1&tbnid=GjgZ8HX0j7r4hM:&tbnh=150&tbnw=195&ei=Lu5LTdOXH5CH4Qayl7jaCw&prev=/images%3Fq%3Drubber%2Bducks%26um%3D1%26hl%3Den%26client%3Dsafari%26sa%3DN%26rls%3Den%26biw%3D987%26bih%3D993%26tbs%3Disch:10%2C3099&um=1&itbs=1&iact=rc&dur=296&oei=D-1LTfbUF4uIhQfRqdirDg&esq=4&page=4&ndsp=20&ved=1t:429,r:16,s:67&tx=61&ty=24&biw=987&bih=993">
<IMG SRC="DUCKDUCK.jpg"> LINK WITH DUCK PHOTO BEING LINK







</BODY>
</HTML>

FIRST HTML LESSON

First impressions html is very simpe if you keep a clear mind. I imagine that if you get overwhelmed with all the codes and layout ideas it would be very easy to mess up the code.
The codes that i learnt were;

 <HTML>

<HEAD><TITLE>Html is easy</TITLE>

</HEAD>


<BODY> This is where the content goes, proper paragraphs, info

</BODY>

</HTML>

This is the start of every web page, you have a head and a body of the site.

TIPS
Never leave gaps in filenames.
Colour is spelt COLOR
Centre is spelt CENTER (use after body tag)
<TAG> On the left, this is called a tag.
OTHER IMPORTANT CODES
Background color   <BODYBGCOLOR=GREEN>
Bold <b> </b>
italic <i> </i>
line break <br>
Shortcut to closing all font codes e.g color, size, font... </FONT>

RESPONSE/FEEDBACK FROM VIDEO

Our video got showed infront of all of the class.  Phil got everyone to give on word responses to our video, some of which were; informative, clear, funny, detailed and public information video.  The over all feeling of the video was that it was very detailed with lots of diagrams and pictures.  Phil said that it reminded him of a public information video.  This is something i will pursue further researching to see if we can use this idea for our 30 second video for our homepage.

train map for references

Video

We met up yesturday to discuss the making of the video and the content.  We felt that the video need to have diagrams of the what was being talked about so everyone could visualise what we wanted our pages to look like.  We all decided what we were going to say for the video.  But no one else wanted to be in the video so jennie suggested using a website called IVONA.COM.  This is a website that uses a number of voices to say what you type in to the website.  We organised for everyone to type up their speeches and send them to me so i could have them for the video.

As no one else in the group knew how to use I-movie and i had previous experience I volunteered to put the video together.  This was a bigger job than i thought and i wish i had said that we should have done it all together.  The computerised voices in the video sounded ok but i felt it would have been 100 times better if we appeared in it or just all did a voice over for it.

here is the final video that we presented:

HOME PAGE

We want our homepage to look like a train map but still look like a spine. The main design traits of a train map is lots of colour, clear bold typefaces and a grid interface.  Here is an image of a spine that shows the true shape of the spine, you can see that it has bits that point out from the vertabrae.  These could potentially be train stops? Or train lines off to other pages.  Having no experience in html i am apprehensive about doing this project as i cant really start to think how this will all be done in time.  Hopefully i will learn what i need to create the website and make it look impressive and professional.