I spent a lot of this last week trying to get the navigation to update with an “active” class when the page is in view.  This class allows me to style the navigation differently than the rest when it is the focus.  The next thing I spent a bit of time on was absolute positioning and centering my content.  There are times when I will need items to “stick” to one area, while other times I will need items to adjust their size and position if the user adjusts the screen size.  I was able to accomplish centering by applying the utilizing the following CSS:

.overlay-center {
    position: absolute;
    left: 50%;
}
.overlay-box {
    background-color: rgba(255,255,255,.9);
    padding: 2em;
    margin: 2em;
    border-radius: 3px;
}
#home div > .overlay-box {
    position: relative;
    left: -50%;
    max-width: 350px;
    min-width: 250px;
    margin: 10px auto;
    height: 25%;
}

To this code:

<section id="home">
   <div class="overlay-center">
     <div class="overlay-box">
       <h4>Overlay Box Heading</h4>
       <h4 class="subheading">Overlay Box Subheading</h4>
       <p>This is some body text.</p>
     </div>
   </div>
 </section>

One problem I haven’t been able to solve yet is updating the header with the “current page.”  I have the plugin set up, but I can’t make it function completely—hopefully next week!  Here’s a live version of my progress:

http://goo.gl/rbK41q

I spent a lot of time this last week researching better options for the scrolling of my site and working on the navigation.  There are two jquery plug-ins that I have been trying to work with since last week:

1. onepage-scroll
2. isInViewport

Onepage-scroll allows me to scroll page by page with a smooth animation between them.  I have implemented the scrolling, but the navigation is basically broken at the moment.  The following zip file contains “grid.html” and is a demonstration of the page scrolling working:

• foundation-4

This week was mainly focused on creating the skeleton of the site, and the basic structure of the navigation.  The site is far from being usable at this point, and much of the styling for the navigation is simply not there.

I started off planning to utilize Bootstrap 3 as my framework, but after further research I have decided to go with Foundation 4.  The major purpose behind this is due to the adaptive image plugin called “Interchange.”  Since my site is so image heavy, it will be important to serve the proper image size for the correct screen size. I could add a responsive image plugin to Bootstrap, but there are a few features Foundation offers that give it the edge.

The following files require the Bootstrap 3 framework to function properly, but if you’re interested in the code I’ve created thus far, it’s below:

HTML
CSS

Mark Teater
FARMUR

Project Description:

Farmur is a responsive web site that allows users to explore the history, present day, and future of urban farming through interactive info graphics, motion graphics, and illustrations. Users are encouraged to learn about urban farming concepts by engaging the material through rich media.

Final Presentation from UX Class

Testing Report from UX Class

Test Plan from UX Class

Full Project Timeline from UX Class

Wireframes from UX Class

Midpoint Thesis Presentation

Information Architecture from UX Class

Design Specs from UX Class

Assignment 1.2: Create your List of Deliverables

• 1 responsive web page with 12 animated sections
• “Loading” & “Home” pages
• “More Information” modal window
• 1 interactive timeline
• 2 interactive infographics
• 1 interactive calculator section
• Midterm Presentation (slide show)
• Final Presentation (slide show)

Assignment 1.3: Create your GDS Timeline (your semester plan)

Module 1

• Introduce thesis to class
• Post Midpoint Thesis Book & Presentation
• Create Timeline
• Complete Directed Study Journal

Module 2

• Create basic skeleton/framework of entire site (1 page, 12 sections, 1 section has four tabs)
• Create style page for use over entire site
• Start navigation structure
• Complete Directed Study Journal

Module 3

• Create sections: “Home,” “Loading Screen,” “Motion Graphic,” & “More Information” Modal Window
• Apply navigation design
• Complete Directed Study Journal

Module 4

• Create sections: “History of Urban Farming,” & “Urban Farming in the USA”
• Complete navigation
• Animate “Loading Screen,” “Motion Graphic,” & “More Information” Modal Window
• Complete Directed Study Journal

Module 5

• Create sections: “Our Broken Food System,” & “Benefits of Urban Farming”
• Animate navigation
• Complete Directed Study Journal

Module 6

• Create Interactive Timeline Section: “USA Agricultural Timeline”
• Complete Directed Study Journal

Module 7

• Midterm Presentation
• Work on bugs from bug report
• Complete Directed Study Journal

Module 8

• Create Interactive Infographic Section: “Rural Population Goes Urban”
• Complete Directed Study Journal

Module 9

• Create Interactive Infographic Section: “Industrial Waste & Consolidation”
• Complete Directed Study Journal

Module 10

• Create Interactive Calculator Section: “Estimate & Plan Your Garden”
• Complete Directed Study Journal

Module 11

• Work on bugs from bug report
• Complete Directed Study Journal

Module 12

• Create Section: “About” (with 4 tabs: “Further Reading,” “Data Sources,” “About Farmur,” “Share Farmur”)
• Complete Directed Study Journal

Module 13

• Work on bugs from bug report
• Animate sections 1-6
• Complete Directed Study Journal

Module 14

• Animate sections 7-12
• Prepare final presentation
• Complete Directed Study Journal

Module 15

• Final Presentation
• Complete Directed Study Journal