05/02/2013

05/02/2013

To start off we were shown what our next CA would be, a Responsive Website/Blog with Javascript, Which will be due on 12-03-2013. For next week we need to have our proposals submitted so we can begin work on the site itself, the pictures and the video. For DMPT we also need a documentary style report about issues in our community, so to help me to be more productive I'll try proposing topics that will tie in easily with both CA's.

We have about a month to work on our site. To start, I'm 100% certain that I'll start a new site instead of reworking one that already exists. The video and pictures may be an issue as I don't own a decent device to film with, only a 6 year old phone which definately won't do the job. I'll ask around and see if I can borrow one off someone. I have a tiny bit of experience with Javascript as I used one in my previous site ( the Gallery ) so I think implementing some new javascripts should be too much of a problem. Finally, the responsive aspect to the site. Over then next week or 2 we'll be going over responsive sites in class sp hopefully during those weeks I'll get a firm grasp on how to make the site responsive!

We did a responsive web design tutorial, link below:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries.

In the tutorial we are given a finished site that isn't responsive. We are then shown step-by-step how to make each part of the site responsive. The tutorial gives you a climps behind the thought process of how we're going to be making our own sites responsive in the following weeks. Importantly, it starts with a css Reset so the browsers don't mess with our layout:

Main page:

Responsive page: 

/************************************************************************************

RESET

*************************************************************************************/

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,

dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,

a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,

strong, sub, sup, tt, var, legend, fieldset {

margin: 0;

padding: 0;

}

img, fieldset {

border: 0;

}

/* set image max width to 100% */

img {

max-width: 100%;

height: auto;

width: auto\9; /* ie8 */

}

/* set html5 elements to block */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 

    display: block;

}

The rest of the css page is just the set up for the default page. We're also given a media-queries.css file, which is where we will be applying the new css for the smaller widths. A quick example from the tutorial of the 650 max-width:

/*******************************************************

650px max-width

*******************************************************/

@media screen and (max-width: 650px) {

#header{
height: auto;
}

#searchform{
position: absolute;
top: 5px;
right: 0;
}

#main-nav{
position: static;
}

#site-logo{
margin: 15px 100px 5px 0;
position: static;
}

#site-description{
margin: 0 0 15px;
position: static;
}

#content{
width: auto;
float: none;
margin: 20px 0;
}

#sidebar{
width: 100%;
float: none;
margin: 0;
}
}