Week 13

This week I spent a lot of time working on visual style. 

http://eddiehunter.no-ip.org/wordpress/ (This will not be available all the time)

I now have merged style with functionality.  This meant adding css styles to the template pages.  I did work on the header to make it more visually appealing, and also more apparent that you are looking at the Ajiri Tea website.

Below, I've listed what I wanted to get done, and what I did.  At the bottom of the post, I have a list of things that will need continued work.  That to-do list has grown since not everything was accomplished last week.

[ Was going to do ]

•  ( yes ) Start working on presentation

I began a PowerPoint presentation.  It is very brief at this point, but the idea will be to work through the needs of my client from the site re-design to the added functionality that a content management system provides (CMS).    

• ( no ) I would like to use lightbox to display the images in their full size on the gallery pages.
• ( no ) I also need to include the brochure on the homepage.
• ( yes ) I also need to reduce the size of the company brochure.

I was able to reduce the size of the brochure from 7.2MB to around 400K. 

• ( no ) I also would like to make the "News" & "Search" sections more robust.
• ( yes ) Plus I need to start cleaning up my code and establishing a style for the site.

I need to do more on this, but I was able to merge the content with the style.  I still would like to make sure that I am following proper conventions, and also using consistently using the WordPress API.

• ( no ) I need to hook into various social media sites, at least facebook and twitter

I added placement for social media links, but have not worked on hooking in the social media links.

• ( yes )Style side navigation to make links bigger, easier to click/ see

While working on style I created an h3 style for links.  This will be used in side-navigation.  I am still trying to figure out how i will use this for the sidebar on the archive pages.

• ( yes ) Style the main navigation to make it less blocky (Larger plain text, with underline on hover?)

I decided on some white text with a dark brown hover effect for the main navigation.  I also gave both states a text-shadow style.  This gives the effect of recessed lettering in the header during the hover state.  It also makes the text pop a bit more when the menu is in its ready state.

To Do (Next Week):

• Change JSON format country->state->store
• JSON feed is also getting messed up
• I am escaping quotes on the database inserts, then the json_encode on the php side is also escaping the quote, so i end up with something like Eddie\\'s
• Add brochure to the home page
• Work on the "News" section
• Clean up code
• Create poster
• Finish PowerPoint presentation
• Cross browser compatibility checks
• Update wordpress version
• Work on getting content into the site
• Link to social media
• If you have time create an images page, large gallery with categories, so that all your images are viewable in one place.
• If you have time think about a lightbox implementation (this can happen after the course is complete)

Week 12

This past week I spent going through the "About" sections of the site.  I decided that it made sense to break out the section into multiple parts.  Most of the Ajiri Tea website is text explaining certain aspects of the business and the people involved.  Here are the following sections:

• About the Company
• About the Tea
• About the Labels (packaging)

For both the tea and labels sections I thought it made sense to break down these sections further.  For instance, when learning more about where the tea comes from I thought it would be useful to read a brief description, delve into the process that brings the tea from the ground to your doorstep, and then display a gallery showing pictures of the tea, farms, and workers that produce the tea.  This natural grouping of content allowed me to create the following sub sections:

• About (Tea/ Labels)
• Process for creating (Tea/ Labels)
• Gallery (Tea/ Labels)

I spent time adding some visual ques to these pages.  That includes adding image headers to the sections, and creating the gallery functionality.  With WordPress you can create a gallery using the gallery tag, from the wysiwyg, or you can loop through the attachments on the page and display all of those images.  I chose to do the later so that I would have more flexibility to display the images.

Moving Forward:

• Start working on presentation
• develop a story
• Also, try to do this on the site
• develop visio diagram ( address book, news articles, wordpress ERDs)
• Talk with my client (see if she has enough content for an awards/ testimonial section of the site)
• Would like to use lightbox to display the images in their full size on the gallery pages. 
• Need to include the brochure on the homepage. 
• Need to reduce the size of the company brochure. 
• Would like to make the "News" & "Search" sections more robust. 
• Plus I need to start clearning up my code and establishing a style for the site.
• Need to hook into social media (facebook & twitter at least).
• Style side navigation to make links bigger, easier to click/ see (label like links)
• Style the main navigation to make it less blocky (Larger plain text, with underline on hover?)
• style "the process" section of the "about" pages

Week 11

This was another week of continued template work.  I now have a total of 20 template pages on my site.  The template pages are pages that determine how content will be displayed from the WordPress database. I developed templates that would display:

·      Single pages

·      Search results

·      News links

·      About pages

·      Gallery

I also focused on side navigation, for the about pages.  The idea for the about section had been split into information about the company, the tea, and the labels.  Now both the labels and the tea sections have 3 sub pages, a general about section, an about the process section, and a gallery section.

I also spent time adding Google Maps links to the addresses on the find a store section.  Now users can select this link from the list of stores and see the store plotted on a google map, this allows them to quickly access directions to the store. 

Week 10

This week was spent cleaning up some of the stuff that I had done hastily earlier on, or had basically just dummied up and left as a mental “to do”.  I took the time to setup a constant contact form on the home page so that users can opt in to receive a semi-annual newsletter.  I also added a contact form to the contact us section.  This form accepts a general message and emails that message to the company owners.   The find a store section that features a map of the United States needed an update as well.  I added a list of states with stores in it.  This meta information is presented as a list of links next to the map.  The user can click into this list of links or select a state from the map and the store information will appear. 

I also spent some time corresponding with my client, and she indicated that they would like a green color scheme for their site.  She also provided me with access to some photo albums that she posted on Google+.  

Week 9

This week I spent a lot of time doing research and finalizing the standards that I would like to use when developing in WordPress.  One of the reasons that so many people use WordPress is that it’s very simple to use.  You add information into html forms on the admin side, and content displays on the user side in the form of a webpage.   Instead of choosing a pre-built template, I decided to make my own.  

WordPress gives you multiple ways to display information stored in the database.  They have a variety of built-in functions that display post information.  There are actually four different ways to loop through post content, all which have the same result but are implemented differently.

For my template I chose to loop through the posts by using the get_posts() method.  To do this you define an argument array that describes the type, number, and category of information that you would like to display.  This returns a post object, which you then loop through to output information. 

Here is a description of the different kinds of way to loop through WordPress data:

http://digwp.com/2011/05/loops/

Checking for Broken Links on your site

The site that I am working on will have lots of old news/ event articles that link to other sites for information. In order to ensure that old/ broken content does not exist on the site, I would suggest using the W3C Link Checker listed below to validate links.

http://validator.w3.org/checklink

Check links from your desktop with either:
Integrity:
http://peacockmedia.co.uk/integrity/

LinkChecker:
http://linkchecker.sourceforge.net/

The Fold

The Fold is a term used to describe the portion of a page that is easily visible when users first open a page.  The area that encompasses “the fold”, is about 600px tall, and should contain the most important content on your site.

http://en.wikipedia.org/wiki/Above_the_fold
http://iampaddy.com/lifebelow600/

Google has recently chosen to state the importance of the fold by changing search rankings to value content above the fold more.  Google want users to easily locate the content that they were searching for when they follow search result links to a site.
http://googlewebmastercentral.blogspot.com/2012/01/page-layout-algorithm-improvement.html