It's live!

After all this time I finally have a website! 

Can't believe this moment finally arrived....

Rationale.

I came into this semester not quite knowing what to expect. This was a whole new programme I was learning and a completely foreign language to go with it. I was interested to know how it all worked but didn’t believe I would be able to code a working site.

I chose to focus my site on the interior design architecture magazine ‘Inside’. The magazine is clean and sharp and shows off the showcased designs. The website however didn’t present the same idea. It was quite cluttered and dark and the image were lost in the content.

My challenge was to create an accessible, desirable website that projected a similar feel to the printed document, while harnessing digital opportunities.

I decided to design a simple 3-column layout with a fixed navigation bar on the left. The content would run down the right with the ability to browse features in chronological order. When choosing the five pages to create I looked at the existing website and chose the pages that could be improved. They were also pages that when clicked through would demonstrate the functionality of the site.  I designed the Home Page, the News section, the Magazine section, an article and the contact page.

HOME PAGE:

The home page is the first thing that people see when they enter the site. It introduces the brand, the content and the visual language. I chose to use a fixed navigation bar on the left, so the viewer could constantly see the header and wouldn't have to scroll to the top of the page after browsing, to click on different links. The featured sponsor sits in the left column, and is maintained across the other pages, changing monthly dependant on the issue.

I used a jquery plug in to act as a teaser for the content of the most recent issue of the magazine. The items showcased in the right column are the top viewed from each section.

NEWS:

The news section is set out in a blog format with the opportunity to search through tags, dates and articles. It presents the latest news in the interior design and architecture world, such as awards, proposals and exhibitions. 

It is laid out in a similar style as the home page, in order to maintain visual coherence. 

MAGAZINE:

The magazine section shows articles and images from the most recent, and past publications. It allows you to click on selected articles to view in a digital format.

ARTICLE:

The article page shows the layout of an article that you would see if you clicked on any of the links in the right column. It presents all the information at the top, showing the title, author, date and a brief introduction. The text is displayed below with image supplementing the information. 

At the end of the article the user is given the opportunity to share the article.

CONTACT:

The contact page was quite overwhelming on the original site, as it included the contact details for everyone involved in the publication, showing their numbers and emails, It was not clear who to contact for general queries. I created a comment form for people to submit, and showed only a few contacts with clear headers, so the user would know what department to contact and who to talk to.

   

This process has been tough and stressful but also extremely rewarding. It has taught me so much and showed me that not everything is as intimidating as it seems. I believe I fulfilled my challenge, creating a simple, clean website that s easy to navigate and shows off the images and designs of the featured material.

jquery.

I used a simple jquery slideshow developed by Jon Raasch. I wanted to keep my site very simple and clean, with the focus being on the designs being showcased. The slideshow is quite modest and requires no interaction (clicking through the images) just running by itself to give a teaser of the content in the most recent issue.

It was relatively easy to install once you had downloaded the folder and dropped in the code. I think it does a good job of fitting with the rest of the design and not taking over.

Last steps.

After editing and re-editing my website I finally decided it was time to make it live..... didn't quite go the way I planned. For some reason my payment didn't register and my domain name hasn't been purchased so I can only use the temporary address which isn't viewable online.
Waiting to hear back from the technical support team. Fingers crossed!

coding take two.

By coding my website twice in two different ways, my knowledge of html coding has dramatically increased . I appreciate the time and effort that goes into the construction of a website, and am confident that I can now use my new found knowledge to creating on online portfolio for myself.


I designed and coding 5 pages- the index or home page, the News section, the Magazine section, an article and the contact page

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Inside</title>
<script type= "text/javascript" src="jquery-1.2.6.min.js">
</script>
<script type= "text/javascript">
    function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
    }

    $(function() {
    setInterval( "slideSwitch()", 3500 );
    });
</script>

</head>

<body>
<div id="wrap">
    <div id="aside">
        <div class= "logo">
        <a href="index2.html"><img src="Images/Insidelogo.jpg" width="142" height="45" alt="logo"></a>
        </div><!-- /logo -->
        <ul id="nav">
            <li><a href="magazine.html" id= "t-mag">Magazine</a></li>
            <li><a href="news.html" id= "t-news">News</a></li>
            <li><a href="#" id= "t-work">Workspace</a></li>
            <li><a href="#" id= "t-show">Showcase</a></li>
               <li><a href="#" id= "t-about">About Us</a></li>
            <li><a href="#" id= "t-sub">Subscribe</a></li>
        </ul>
    <div id= "ad">
        <h4>featured sponsor</h4><a href="http://www.cotto.co.th/main.html"><img src="Images/CottoMilan.png" alt= "ad"></a>
        <h3>COTTO in Milan</h3>
        <p> Thailand based tile and sanitaryware brand COTTO is set to launch its Marmo Granito-Paradiso collection at 2012 Milan Furniture Fair.</p>
    </div><!-- /ad -->
   
    </div><!-- /aside -->
   
    <div id="content">
    <div id= "feature">
        <div id="slideshow">
        <img src="Images/inside-cover.png" alt="cover" class="active" />
        <img src="Images/spread1.jpg" alt="spread1" />
        <img src="Images/spread2.jpg" alt="spread2" />
        <img src="Images/spread3.png" alt="spread3" />
        <img src="Images/spread4.png" alt="spread4" />
        </div>
        <h1>inside magazine 70: <span style="font-weight:400">working for solutions<span style="color:#ff6633">//</span></span></h1>
    </div><!-- /feature -->
                   
       
         <div class="article">
            <a href="#"><img src="Images/holick-resort-1.jpg" width="328" height="209" alt="holick"/>
            <h2>Holick sea resort, sweden<span style="color:#ff6633">//</span></h2></a>
        </div><!-- /article -->

       
        <div class="article">
            <a href="#"><img src="Images/500bourkest.jpg" width="328" height="209" alt="500bourke"/>
            <h2>500 bourke st<span style="color:#ff6633">//</span></h2></a>
        </div><!-- /article -->
   
        <div class="article">
            <a href="#"><img src="Images/jamiesitalian.jpg" width="328" height="209" alt="jamies"/>
            <h2>Jamie's Italian<span style="color:#ff6633">//</span></h2></a>
        </div><!-- /article -->
       
        <div class="article">
            <a href="#"><img src="Images/operahouse.jpg" width="328" height="209" alt="opera"/>
            <h2>Sydney Opera House<span style="color:#ff6633">//</span></h2></a>
        </div><!-- /article -->
   
 
    </div><!-- /content -->

    <div id="footer">
        <ul>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms and Conditions</a></li>
        </ul>
    </div><!-- /footer -->
   
</div><!-- /wrap -->
</body>
</html>

CSS:
@charset "UTF-8";
/* CSS Document */

#wrap {
    width: 80%;
    max-width: 750px;
    min-width: 600px;
    margin: 0 auto;
    padding: 40px 0 0 0;
}

#aside {
    float:left;
    position:fixed;
}

.logo {
    padding-left: 40px;
    padding-bottom: 20px;
}

#content {
    float:right;
    width: 450px;
    text-align:inherit;
}

#feature {
    padding-left: 5px;
    padding-right: 20px;
    padding-bottom: 10px;
    border-bottom: dashed thin #666;
}

#slideshow {
    position:relative;
    height:300px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

body {
    background-color: #FFFFFF;
    color: #666666;
    font-family: Breuer,Helvetica,Arial,Sans-Serif;
    font-size: 10px;
}

.article {
    clear: both;
    overflow:  auto;
    border-bottom: dashed thin #666;
}

.article img {
    float: right;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 1px;
    padding-right: 1px;
}

h1 {
    font-family:Breuer,Helvetica,Arial,Sans-Serif;
    font-size: 10px;
}

h2 {
    font-size: 10px;
    color:#333;
    text-transform:lowercase;
    font-weight:400;
}

h3 {
    font-family:Breuer,Helvetica,Arial,Sans-Serif;
    font-size: 10px;
    color:#ff6633;
}

h5 {
    text-transform:lowercase;
}

li {
list-style-type:none;
}

#nav{
    font-size: 12px;
    background-color:#FFF;
    text-transform: uppercase;
}

#nav #t-mag {
    display: block;
    background: url(Images/M.png) no-repeat left top;
    height: 23px;
    padding: 1px 0 0 20px;
}

#nav #t-news {
    display: block;
    background: url(Images/N.png) no-repeat left top;
    height: 23px;
    padding: 1px 0 0 20px;
}

#nav #t-work {
    display: block;
    background: url(Images/W.png) no-repeat left top;
    height: 23px;
    padding: 1px 0 0 20px;
}

#nav #t-show {
    display: block;
    background: url(Images/S.png) no-repeat left top;
    height: 23px;
    padding: 1px 0 0 20px;
}

#nav #t-about {
    display: block;
    background: url(Images/about.png) no-repeat left top;
    height: 23px;
    padding: 1px 0 0 20px;
}

#nav #t-sub {
    display: block;
    background: url(Images/subscribe.png) no-repeat left top;
    height: 23px;
    padding: 1px 0 0 20px;
}

#ad{
    width: 120px;
    margin-left: 40px;
    margin-top: 40px;
    border-bottom: thin solid #FF6633;
    border-top: medium solid #FF6633;
    font-size:9px;
}

a:link {
    color: #666666;
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

a:visited {
    color: #999999;
    text-decoration: none;
}

a:hover {
    color: #48BABF;
    text-decoration: none;
}

#comment-form {
    width: 50%;
    float: left;
   
}
#comment-form fieldset {
    margin: 0 0 15px;
    border: none;
    }
#comment-form fieldset label {
    font-weight: bold;
    margin: 0 0 3px;
    }
#comment-form fieldset input,
#comment-form fieldset textarea {
    width: 90%;
    padding: 5px;
    font-size: 1.4em;
    background: #e2e1d7 url(../images/input-bg.gif) repeat-x;
    border: none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
 
    }
#comment-form fieldset textarea {
    height: 100px;
    }
#comment-form fieldset input:focus,
#comment-form fieldset textarea:focus {
    background: #fff;
    }


#footer{
    clear: both;
    padding: 10px 0 10px 0;
    font-size: 1em;
    color: #9c836e;
    float:right;

}