06 November 2013
I would like my website to be not too cramped with pictures or text. Ideally I want to achieve a balanced combination of both. The Gamestation website is an example of a site which is well-balanced and evenly spaced. The Yogscast site is well designed with all the information centralised and the content is clearly presented. I wanted to develop a site with a similar look and feel. I used Mockingbird as my template because it had the right layout and it gives lots of room for adjustment and content so there are many possibilities.
This is my first template. I have text in the middle but not too much and then there are two slideshows, one above and one below. If you click these they will exapnd the picture. There is music/radio at the side a rating system and social media networking above for blogger/twitter. there will be a menu bar at the top and a search bar next to it so that you can have more precise searches. I will also have a log in bar right at the very top right hand corner.
I saw on some other websites some interesting Java script techniques that I can use - for example the drop down menu for the menu bar. In my second template above I have included this drop down menu.
13 November 2013
The next step is the production log of all my development stages. I need to include how long it will take to achieve the steps.
Here is the log below.
I chose to use Excel because it is a spreadsheet and I thought the layout was particuarly appropriate with columns and rows. I felt it was easier to use than the other option, which focused on time periods. It looked complicated and I thought it would take a long time to produce my log with this opption. I was able to include a timescale along the top from the time we started to an appropriate time we were going to finish. I included the headings for the appropriate information we needed to complete and I added sub headings for more detail. I was able to include everything required into Excel.
These are some examples of activities I needed to do:
create my design
on mocking Bird and |
| finish my design on mocking Baird |
| update blog |
create my plan for recording what I do
|
4/12/13
I worked on developing my ideas on the presentation of the website. I did some detailed drawings of what I wanted to include such as images, information, links. Images of college work, work I may have completed at home, links to my blog, Facebook and Twitter, personal information, information about the images, what I am doing at the moment at college.
6/12/13
For the first assignment I had to list all the components and features in the webiste. I made a list including everything I had included so far. I still needed to add things I liked with an explanation of why I liked them. I also had to add things that were not of interest to me and giv e an explanation for this. I put all this information into a word document. I made an evaluation of my website so far - I liked the drop down menu and the slide show but I was not happy with the icons for the social media. They were too small and this could make it too hard to click on them. My tutor feedvback was that the drop down menu was going to be hard too create and would take too much time, the icons were too small and it would be complicated to link them to social media sites. I had feedback that the idea in general was good especially the idea of the picture expanding.
I changed the icons to text so it was easier to know what was being activated. I changed the drop down menu so that it was simpler to use by cutting down the text , didn't use images, cut down the amount of links so the page loaded more quickly too.
1/12/13-18/12/13
I finished my production log on likes and dislikes.I added feedback from members in the class. I gained good feedback overall. there were some suggestions - for example, a home button so I could jump straight to home. I thought this was a good idea. They also said that under the rating system for the website that there should be a comments box. this was also helpful. I changed the site to add a box and a home button
22/01/14
I then started to build my website on dreamwever. I chose this as it is a site for building websites and I felt this was the most appropriate. I started with adding the images, selecting the correct images. This was reasonably difficult to find really appropriate ones. I used google as my main source. The hardest images to find were college related ones. I used the Northbrook website and added links to show where they had come from and links to social media sites. I connected my Youtube channel to the website. This took some time because the coding had to be precise for it to work.
29/01/14
I had to find out how to add an image to the menu bar. I looked on coding websites for people who were starting out to do this. I found one or two things which were helpful such as the menu bar drop down bit and how to ifx it to make it my own. I asked other students about the images. They demonstrated this for me which was very helpful. I also added boxes and grids to position my menu bar and picture linksand headers so that they were in the correct position. I struggled with this because the boxes were either too small or too big. I worked with my friend to adjust them to the correct size and I also made them invisible so you could not see the lines. this made it look more professional.
05/02/2014
I started fixing the menu bar becaue i kept having problems with it. Things were popping up that weren't meant to be there. Links were not completely working.
I had to change some of the coding because it was not referencing to the right page. This was frustrating because I had to type the folder and the page name and it was complicated finding the directory. I did in the end manage to find it and add it.
<div id="menu-wrapper">
<ul id="menu">
<li class="current_page_item"><a href="#"><span>Homepage</span></a></li>
<li><span>college</span>
<ul>
<li class="first"> <a href="../boldness2/index">unit</a> </li>
<li> <a href="../boldness2/search">unit</a> </li>
<li class="last"> <a href="../boldness2/about">unit</a> </li>
</ul>
</li>
12/02/2014
I fixed the css menu bar and I stopped the purple from popping up when you hover over the selection. I went through the coding twice to make sure it was perfect because even the slightest thing could make it not work.
I then linked all the menu bars to all the pages (<li class="first"> <a href="../boldness2/index">unit</a> </li>) the (a href=) means that it is looking for a folder called (/boldness2) then it is looking for the file (/index) in (/boldness2).
The <span> tag is used to group inline-elements in a document for example (<li><a href="#"><span>Photos</span></a></li>).
<script type="text/javascript"> means that it has a drop down menu
($('#menu').dropotron();) Adds multilevel dropdown menus to jQuery. This makes it customisable for your needs.
<div id="menu-wrapper">
<ul id="menu">
<li class="current_page_item"><a href="#"><span>Homepage</span></a></li>
<li><span>college</span>
<ul>
<li class="first"> <a href="../boldness2/index">unit</a> </li>
<li> <a href="../boldness2/search">unit</a> </li>
<li class="last"> <a href="../boldness2/about">unit</a> </li>
</ul>
</li>
<li><a href="#"><span>Photos</span></a></li>
<li><a href="#"><span>About</span></a></li><li><span>Links</span>
<ul>
<li class="first"> <a href="../boldness2/index">Maecenas luctus lectus</a> </li>
<li> <a href="../boldness2/search">Integer gravida</a> </li>
<li class="last"> <a href="../boldness2/about">Ut nonummy rutrum</a> </li>
</ul>
</li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
<script type="text/javascript">
$('#menu').dropotron();
</script>
</div>
19/02/2014
For the slide show I added it so that it rotates the pictures at a specific pace. I also added the 'popping out' so that when the pictures popped out they were a certain size and remained clear.
Java side scroling slide show.
<div id="slider">
<div class="viewer">
<div class="reel">
<div id="gallery">
is all for the slide to identyfiy that it is.
<div class="slide"> <a
href="../boldness2/images/pics01.jpg"><img
src="../boldness2/images/pics01.jpg" width="590" height="300" alt=""
/></a> </div> (<img
src=) means that it is looking for a pickta in this example (../boldness2/images/pics01.jpg") is looking for pics01 the jpg mean that it is a Joint Photographic Group. width="590" height="300" is the width and height of the image.
<div id="slider">
<div class="viewer">
<div class="reel">
<div id="gallery">
<div class="slide"> <a href="../boldness2/images/pics01.jpg"><img src="../boldness2/images/pics01.jpg" width="590" height="300" alt="" /></a> </div>
<div class="slide"> <a href="../boldness2/images/pics02.jpg"><img src="../boldness2/images/pics02.jpg" width="590" height="300" alt="" /></a> </div>
<div class="slide"> <a href="../boldness2/images/pics03.jpg"><img src="../boldness2/images/pics03.jpg" width="590" height="300" alt="" /></a> </div>
</div>
</div>
</div>
</div>
<div class="post">
<h2 class="title">welcome to my site </h2>
</div>
<div class="post">
<h2 class="title">need to know </h2>
<div class="entry">
<p>i am a first year Games design student studying at northbrook college (2 years course) previously i went to school at The Regis school. I hope to enter the industry of game development and be amazing all round development.</p>
</div>
</div>
<div class="post">
<h2 class="title"><font color="#560969">the things i enjoy</font> </h2>
<div class="entry">
<p>gaming, HTML, 3d modling, </p>
</div>
</div>
<div style="clear: both;"> </div>
</div>
</div><!-- got the slide show to work and the imige to exspand when you click on it-->
<!-- end #content -->
<div id="sidebar-bg"><!-- end #content -->
<div id="sidebar">
<ul>
<li>
<a href="http://www.computerandvideogames.com/news/"><h2>news</h2>
<a href="http://www.computerandvideogames.com/news/"><p>whats going on</p>
</li>
<li>
<a href="https://www.youtube.com/channel/UCZMBBxmvIj7QUK0QT9Vjq8Q/feed"><h2>Youtube</h2>
<ul>
<a href="https://www.youtube.com/channel/UCZMBBxmvIj7QUK0QT9Vjq8Q/feed"><li>My youtube chanal</li>
</ul>
</li>
<li>
<a href="http://wubbaducky.blogspot.co.uk/"><h2>Blog</h2>
<a href="http://wubbaducky.blogspot.co.uk/"><p>Myblog</p>
</li>
<li>
<h2>socal sits</h2>
<ul>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
</div>
<div id="footer"></div>
<!-- end #footer -->
</body>
</html>
it is a grate way to be creative
