15/03/2013

15/03/2013

Today is the final day! To start I began validating my code on http://www.w3.org/.

The index page is almost perfect, the validator doesn't like the '#' in <a href= #>~ Top ~</a>, which is kind of required for the function to work. No doubt it will appear on every page then so there won't be any perfectly clean code pages.

 On the alternatives page, there was issues with the validator trying to figure out the Javascript. there wasn't much I could do with breaking the JS so I just left it. excluding the '#' at the bottom, there was a total of  7 warnings and 5 errors, all in the JS. 

Just like the Alternatives page, Contacts has the same issue with he validator about the Javascript. Again, other than that it was fine so I just ignored it. 

Index, More Info, Tips and Facts Page:

mystyle.css had no errors!:

The media queries page also had no errors!:

Now that the site is more or less finished, I'll go over what I've learned from this project. The main and probably most obvious is how to make a site responsive. 

Using @media screen and (max-width: 980px) {} in a css file and putting in new design changes the sites layout to fit on whatever size you see fit. On the project I used 3 sizes that should fit on desktops, tablets and smartphone. ( 980px, 650px and 480px). Although, looking back over it, I would have liked to fix the issue with the videos and google map to fit properly within the associated sizes. 

I learned how to reset all the values of the css in browsers so that you can make your css the way you want without the browser automatically applying widths and heights, etc...

I learned how to make a button in the footer that brings you back to the top of the screen, handy for when the site has to fit in a smart phone and the content gets WAY too long, so having a back to top button is very efficient.

I learned some basic video editing. Using Adobe Premiere, I had to make a video about Ballyogan Recycling Center. To make the video not awful to watch I had to piece different clips from different video files together and put a sound file over them. I also used titles to show what was going on in the video. I think next time I need to make a video, I shouldn't try film somewhere that isn't on private property and will actually allow me to get good shots instead of trying to get good shots while hiding the camera from the workers.

I learned researching skills as I had to search for content for my site. As it was about a certain place, there wasn't many sources so I had to really burrow deep into what sources I had to obtain relevant bits of information. I also had to think of the site to begin with and prepare proposals to justify why to start work on the site in the first place.

Finally, I expanded my knowledge of javascripts. Through labs and the project, I learned how to make pop-ups that appear 'onload', pop-ups that appear 'onclick', popups that allow the user to enter inputs and have the javascript preform actions like basic maths and how to make a semi-working alert clock. 

The first I implemented on my site was the 'onclick' javascript. I had to use 3 as I had 3 pictures that could be clicked. When the picture gets clicked a popup message appears stating that the user is about to leave the site. The message has 2 buttons, one says 'ok' and leads the user to the linked site, and the other says 'Cancel', which keeps the user on the same page. 

Secondly was the clock. I thought just having the clock was a bit too basic and decided to try add a little twist too it. Unfortunately I only got it semi-working.Whats suppose to happen is that if the clock is between the opening times, a message appears below saying that the Center is OPEN, and when its during closing times, displays 'CLOSED'. I had problems that whenever I changed the code to something that I thought would work, the clock wouldn't appear on the page, which was fairly frustrating. The issue is that according the the code, the Recycling Center is ALWAYS open and never closes, which would be a big problem if the site was to go live. 

Overall, the project was a good tool and enjoyable experience at gaining some vital experience with designing a website!

14/03/2013

14/03/2013

I began putting in my second javascript. I'll be putting a real-time clock in the 'Opening hours' section on the contacts page, so people can see easily if the Recycling Center is open or not. In addition, I began trying to adding a line actually saying if the Center is Open or Closed. Unfortunately, this is proving more difficult than previously expected. According to my site, the Recycling Center NEVER closes! I'll be leaving the clock in, but If I can't get it working by tomorrow I'll be leaving it out. 

Below is the code for the clock without the section to add the 'Open' and 'Closed' text:

  function GetClock(){
d = new Date();
nhour  = d.getHours();
nmin   = d.getMinutes();
nsec   = d.getSeconds();

if(nhour ==  0) {ap = " AM";nhour = 12;} 
else if(nhour <= 11) {ap = " AM";} 
else if(nhour == 12) {ap = " PM";} 
else if(nhour >= 13) {ap = " PM";nhour -= 12;}

if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}

document.getElementById('clockbox').innerHTML=""+nhour+":"+nmin+":"+nsec+ap+"";

setTimeout("GetClock()", 1000);

}

window.onload=GetClock;

I also did a small bit of tweeking to the site, to make things fit a little bit more comfortably. nothing particularly worth noting, just pixels added or taken away from a few divs and id's .

13/03/2013

13/03/2013

On the Alternatives page I've put my first Javascript for the CA. The objective of this is to warn the user that when they click the picture links, they will be redirected to a different site. A pop-up should happen giving the user the options 'OK' and 'Cancel'. Clicking 'OK' lets the script run and they will be directed to a different site, and click 'Cancel' will keep the user on the Alternatives page.

Here is an image of what pops up when one of the links are clicked:

Below is the code for the onClick javascript. I have 3 of them (picLink1, picLink2 and picLink3) and each one is only different regarding the link in 'window.location'. I also had to change the 'a href' in the original code to just be an image and to have the style to change the cursor to a pointer.

(Javascript in header):

<script type="text/javascript">
function picLink1() {
var answer = confirm ("You are about to leave this site. Press 'Ok' to leave, or 'Cancel' to stay.")

if (answer){
window.location="http://www.dublincity.ie/WaterWasteEnvironment/Waste/Documents/Ringsend%20DL.pdf";
return true;
}
else{
return false;
}
}
</script>

(Script in Image):

<img src="../images/ringsend.png" alt="temp pic" class="linkpic" style="cursor:pointer" onclick="picLink1();"/>

I began working on the final 3 pages that needed to be made responsive. 

Below is the Tips Page. Nothing particularly difficult here, the same as the other pages apart from the 2 floated pictures. Just altering the sizes of them until they slotted under each other was all it took .

Tips page Full:

 Tips page 980px:

 Tips page 650px:

 Tips page 480px:

On the Facts page, I thought it looked a little dull with all the text, so I decided to add an info graph about recycling. The source is from http://www.loveinfographics.com/wp-content/uploads/2012/03/Recycling-facts-infographics-600x600.jpg and is also stated in the code. The main issue I had at making at making this page responsive was the video. On the transition from 980px to 650px the page cuts out about half the video, I won't worry about it now and i'll sort it out at the end if I've got the time.

Facts Page Full:

Facts Page 980px:

Facts Page 650px:

Facts Page 480px: As you can see the video gets slightly cut off at both sides.

On the Contacts page, I had the same issue as I did with the video on the previous page. The Google map wouldn't re size appropriately and (same as the video) would get cut off by the edge of the screen. As I stated before, I will go back and sort it out at the end along with the video. Noting, the layout of the page I wanted was TEXT, IMAGE, TEXT, IMAGE, TEXT, so atleast that turned out the way I wanted :)


Contacts Pages Full:

Contacts Pages 980px:

Contacts Pages 650px:

Contacts Pages 480px: Same as the Facts Page, The map gets cut off on both sides.

So things left to do before Friday:

1. One more Javascript
2. Tidy up pages

12/03/2013

12/03/2013

Today in class we worked on our CA's. With my time I tidied up my content and made some of the pages responsive!

My header background and footer were responsive from the beginning so I didn't need to spend time working on those, but the header Navigation bar would get cut off by the shrinking screen. 

The code for the header wasn't too difficult to figure out. I changed the width's when the screen reached 980px, 650px and 480px, I also did this for all the changes for size in divs and the wrap. Example code of what I changed the Nav Bar:

This is what full screen looks like, no change to the media-query:


.navbar{
top: 100px;
width: 100%;
height: .1px;
text-align: center;
padding-left: 0px;
}

.navbar a {
border-radius: 2.9px; 
font-size: 30px;
font-family: Myriad Pro;
padding-left: 15px;
padding-bottom: 25px;
padding-right: 15px;
color: #F8F8F8;
text-decoration: none;
min-width: 960px;
}

.navbar a:hover {
color: #333333;
} 

This is when the screen reaches 980px. I decided instead of changing the font to something small and unreadable, I would just move the navs under on another. Some of the code is missing as it was already set in the main css and didn't require any altering, so they were not needed in the media-query: 

.navbar{

width: 685px;

height: 15px;

}

.navbar a { 

font-size: 30px;

padding-left: 15px;

padding-bottom: 20px;

padding-right: 15px;

min-width: 600px;

}

When the screen turns to 450px. I had to change the font down by 5px in this one and ofcourse, change the width down to 600px:

.navbar{

width: 450px;

height: 15px;

}

.navbar a {

padding-left: 12px;

padding-bottom: 20px;

padding-right: 12px;

min-width: 600px;

}

 And finally, 480px. All the nav buttons are squished down to a minimal size, that can be viewed on the smallest screens. After this, if the screen becomes any smaller, no change will happen and text will start disappearing off the screen:


.navbar{
top: 100px;
width: 300px;
height: 33px;
text-align: center;
padding-left: 0px;
}

.navbar a {
font-size: 25px;
padding-left: 12px;
padding-bottom: 20px;
padding-right: 12px;
min-width: 600px;
}

I have also made all the content on the Home Page, More Info Page and the Alternatives Page. The plan of the code is more or less the same as how I made the nav bar fit (Other than just removing floats from previously floated parts of the site), just shrinking the width size down is sometimes enough to have the site responsive. 

Homepage in full screen:

Homepage in 980px:

Homepage in 650px:

Homepage in 480px:

More Info page Full:

More Info page 980px:

More Info page 650px:

More Info page 480px:

With the Alternative page, the only problem I ran into was that the glow around the buttons would completely mess up the 480px part, so I had to remove it :( 

Alternative Page Full:

Alternative Page 980px:

Alternative Page 650px:

Alternative Page 480px:

08/03/2013

08/03/2013

I got around to changing the Logo to something a bit more suitable. To fit the Recycling theme I decided to just use the well known 'Recycling follow arrows' with one of the arrows replaced with a leaf, accompanied by 'Ballyogan Recycling Center' text usign the same colour schemes with the rest of the site. Just for a little bit of styling I removed a small square from the bottom right just to make the logo a bit less dull.

On the home page I changed the temporary picture in the paragraph to one I took at the Recycling Center, and I put a green border around it to make it stand out a bit more. On the home page I also placed my documentary. I had problems putting the video up from the actual file so I just uploaded it to Youtube and embed it from there.

Homepage:

There wasn't much work to be done on the More Info page or the Contacts page. On the Contacts page I put a picture of the luas stop outside of the Recycling Center. Unfortunately I hadn't taken a photo of it so I had to get one off the internet that was taken at night.

I put content on the Tips page. It put a main title with 3 sub titles saying 'Reduce, Reuse, Recycle' with a small paragraph on each one. Under that, I put 2 photos I took at the Recycling Center and Floated them beside eachother and put a border around them. I still have top style it properly as he border reaches down past the 2 photos. Finally, I put another title with tips on what you can do at home. There is a small paragraph and an un-ordered list with 3 points. 

Tips page: Top and bottom area:

On the Facts page I gave reasons why one should recycle with 3 points: Energy, Enviroment and Natural Resources. Each of these is accompanied with a small paragraph and 3 lesser points in the form of an un-ordered list. Floated on the top right is a video I found on youtube about recycling. The video is entertaining and well made so I thought it would be an excellent addition to the website. 

Facts Page: Top and Bottom:

The documentary video link I made for the Site: http://www.youtube.com/embed/Rj02vT53seo

05/03/2013

05/03/2013


I began working more on the main site and the video this week. 

I applied a temporary logo image into the header just to get a feel for how it might look later on when I design the proper one.  Still contemplating whether to leave it to the left or put it in the center of the header. 

I started styling the contacts page. I have all the text floated onto the left side while the map and picture is floated to the right. There's still work to be done on it though as the layout isn't completely even yet. I'm using a temporary image until I screen capture a photo from my video of the luas to use. 

I began adding content to the 'More Info' page. It has the cost to use the Recycling Center and has a table of most of the waste they will accept there. A small problem I ran into was implementing the euro sign, dash and spacing onto the webpage, as it just appeared as big question marks. The euro sign is recognized when '&euro;' is put into the html, '&ndash;' for the dash and '&nbsp;' for a little bit of spacing. For the table I used a standard layout with a bit of styling to keep the sites font and colours consistent. It has 'border-collapse:collapse;' to make the border a single solid line and the same green colour as the footer. The title area uses the blue from the header with the same grey font as the nav menu. Both pictures below are on the same 'More Info' page, it was too long to fit into one image:

I also started work on the 'Alternatives' page. It's 3 other Recycling Centers in the Dublin area in case Ballyogan is too far away for some people. To do this, I had to do research on near-by Centers that I could use a references. For all 3 I put pretty basic information such as: Address, Opening times and a small bit about what kind of waste they will accept. As all the alternatives are smaller in size, they don't take in the variety of waste the Ballyogan does. The other centers were Ringsend Recycling Center, Coolmine RC and Ballymount RC. I found an image that reflects each one and photoshopped the image into a green circle. These images are clickable and lead the user to a site where they can get more information on their desired center. 

26/02/2013

26/02/2013


I began doing my first proper draft of what the site will look like. I've change the shades of the blue in the header and the green in the footer ( Green: 74AF17 and Blue: 086C8C ) to compliment the lightly greyed background ( Light Grey: F8F8F8 ). The font in the header and foot both have the same light grey color as the background. I'm still working out which font to use but so far I'm leaning towards Myriad Pro. The Header uses #333333, which will also be the background color of the logo which I still have to create, and the font in the paragraphs is #7A7A7A (Not final though). 


The header nav is moved to the side to make room for a logo which I'm still deciding on. So the home page and the other pages may look a bit askew.


The picture shown in the paragraph is just temporary as I fiddle around with the layout of the page. I also made a google calander with the opening times of the Recycling Center and put it on the front of the homepage, as I figure that's what most people who access the site are probably looking for, but I will also put the opening times clearer on a different page.

Home page first draft:

I've also begun editing the video which I will use on the site. The intro section is finished and I've a rough idea on what the rest of the video will be like but I still need to decide on background music as the original audio is pretty horrid. 

Below is the contacts page. It is not styled but has all the required content that will appear on the page.