Project timeline

Here’s the plan for this spring:

Jan 14: Introductions and post-it note meeting
Feb 1: CMS overview and selection
Feb 8: Design version 1, database layout conversation, install Codeigniter
Feb 15: Design version 2, database layout conversation
Feb 22: Design version 3
Feb 23: Start to build database with Sequel Pro
Feb 26: Complete database design and complete database
Mar 1: Design version 4, begin coding frontend: start creating the pages with Codeigniter
Mar 15: Design version 5, markup and add data for testing
Mar 18: Database table and data conversation
Mar 22: Marking up site in XHTML/CSS and connecting Codeigniter
Mar 25: Working out details of application form, discussion XHTML/CSS markup issues
Mar 29: Working on community member page, other XHTML/CSS markup issues
Mar 30: Design coded in XHTML/CSS, begin creating dashboard for administration
April 5: Frontend should be pulling all data from backend, begin browser/OS testing and validation
April 8: Discuss administrative dashboard and application process
April 12: Continue work on admin dashboard, tags for artists pages
April 15: Conclude admin dashboard, begin work on member dashboard, discuss procedure for uploading files
April 19: Continue coding member dashboard
April 22: Complete member dashboard, go live date for Beta site, begin member/user-data testing.
May 15: Conclude all member testing, begin making changes based on feedback
May ?: Stage 1 jquery additions
May 22: Go live date. Celebrate successful project!

Date pickers

This is the most promising option, I think: Any+Time Date Picker, a JavaScript library.

Other possibilities:

• This JavaScript date-time picker looks functional, but not very elegant.
• This jQuery date-time picker looks better, but I’m not sure how functional it is, and the drop-down looks a little crowded.

Discarded options:

• Kelvin Luck’s date picker — a jQuery plug-in — is the acknowledged favorite amongst CodeIgniter people but it doesn’t have time capability.
• Here’s a tutorial on using CodeIgniter and the jQuery UI datepicker library to create a date picker. Interesting, but it doesn’t have a time capability. (It’s a tutorial with no demo; what’s up with that?)

The loose ends

I’ve received some feedback from users now, and made my own notes as I’ve used the system, so I have some of these below. Additionally, its a good idea to go over all the code, including CSS, and add comments while its still fresh in our minds. This shouldn’t take long, we just need to address blocks of code or lines that aren’t already commented and look like they need some explaining! Feel free to contribute anything else we need to make this live!

GLOBAL

– Add a sitemap. ___Beth + Owen
– Add titles to all links. ___Owen
– Create class to show external link icon (like wikipedia). ___Owen
– Add search function. ___Owen
– Add CDATA to all javascript tags. ___Owen
– Switch 1000px width to 980px. ___Owen
– 301 .htaccess redirect and make new site live. ___Owen

APPLICATION

– Emails don’t seem to be received by comcast users. Research and find out what we might change. ___Beth
– Add upload image feature to application form (to become default feature image). ___Owen
– Convert new emails and domains to lowercase. ___Brittany
– Remove trailing slash on domain names… see: ryanboatright.com/ ___Brittany
– Add headers again after so many members… _____Brittany
– Add language/code to encourage adding a short statement. ___Owen

ADMIN DASHBOARD

– Clean-up member review page. ___Beth
– Add number of files and number of tags to list of members. ___Brittany + Braylin
– Add an “Are you sure?” page to the delete member button. ___Brittany
– Add ability to order members by date joined (add column) vs. last name. ___Brittany + Braylin
– Keep track of whether or not members pay monthly or annually. ___Brittany
– Add icon for view member profile as well as domain. ___Owen
– How can we make sidebar “site administration” links for admin work better? Add icons. ___Owen
– Add FTP link in admin dashboard See also ___Owen
– Different color for pending, approved, active, and inactive members . ___Owen

MEMBER DASHBOARD

– Make an infographic for the settings page, to show how DNS, webservers, FTP works. ___Chris
– Copy functionality from tags to let users add events? ___Braylin
– Change file to gallery on member dashboard home. ___Owen
– Use first member image for feature by default. Inform member this image will be used as thumbnail too. Save new version of first image when uploaded. ___Braylin
– Member subaccount shouldn’t show plesk username/password. ___Brittany
– Research and find the best date/time selector. ___Beth
– Add FTP link in member dashboard See also ___Owen
– Add external links icon (like wikipedia) esp for pages in member dashboard. ___Owen
– For settings page, show user data as form field, click and it highlights. ___Owen
– Language should be added to encourage adding images. ___Owen
– Add feature image to home of member dashboard. ___Owen

WEBSITE

– Make events page. ___Braylin
– Change all titles (including Support topics) to sentence case. ___Owen
– Show abbreviated statement on their page, with a jquery toggle to show all (pushes down). ___Braylin
– If statement to determine location still spits out “in ,” ___Braylin
– Some images have not been carried over. Check to see if others have. ___Owen
– Clean-up and move Add This button. ___Owen

FRONT PAGE

– Hook events to events table. ___Braylin
– Add jquery image sliders to feature box images. ___Owen
– Hook feature box images to db. ___Owen

COMMENTING AND TESTING

– Add comments to all CSS and PHP files. ___Everyone
– Validate everything. ___Everyone
– Get browsershots of example pages. ___Beth
– Make fixes to design based on browser shots. ___Beth + Owen
– Add validation links to footer. ___Beth

THE FUTURE

– Add buttons to admin to remind pending members they have been accepted.
– Auto email members who have not added images/tags/feature image/events or have not visited in a while.
– Let them update email preferences.
– When someone creates an account with the same name (different email) for a different domain, then the new member script/admin email (confusingly) gets the user by the site url (fname-lname) which actually is their first account. Should get them by email address. ___B&B
– Add jquery email sign-up form. ___B&B
– Server/FTP account integration using Plesk API. ___B&B
– Merge events with a general feed and call it announcements. ___B&B
– Add more support articles and ways to tag/search/sort them.
– PayPayl / Google Checkout API integration. ___B&B
– Member feed / change “events” to “announcements.” ___B&B
– Plot announcements/events on map. ___Owen
– Google Map API / geocode members. ___Owen
– Move to new server. ___Owen
– Integrate CMS for user websites.

PayPal Integration

Payment for hosting accounts is currently made through PayPal. It would be good to be able to integrate the website database with PayPal in order to keep up with members’ payment status.

Because PayPal is involved in making secure transactions work, its API works differently than other APIs I’ve looked at.
What is available depends on what method you’re using with PayPal – Website Payments Standard, Website Payments Pro, or Express Checkout. Which is used for web hosting? This web page discusses the integration methods possible. The GetTransactionDetails API looks promising, but it may be too limited for our purpose. NVP or SOAP may be used to search for information about a transaction by the transactionID. There’s also a TransactionSearch API, which could be useful if you issue an InvoiceID. Here’s a link to more information.

Support subnavigation

I looked the subnavigation collection at Patterntap for ideas and best practices. Nearly all the subnav patterns shown at Patterntap include dropdowns or flyouts. I don’t think that’s our style on this website.

Panels are less usual, but that seems to be the appropriate answer for our content and space. I like the idea of an outline-style accordion; this one looks good. (To tell you the truth, I’m not even sure it’s an accordion, but it could be. The drawback of Patterntap is that you only see a picture and don’t get to experience the UI.) An accordion like that, together with a tag-based drop-down list and a search bar would present the user with a lot of choices for finding articles. Could be overkill, though. Maybe 2 out of 3 wouldn’t be bad, then.

We could do something like this example and show how many articles are in each group.

CSS + Image Sizes

Here is the master list of all hexcodes and image sizes we are currently using:

CSS Hexcodes

• 000000 black
• FFFFFF white
• c53232 red (links, notice)
• aa0000 red (links, notice, form stuff, etc)
• 5e5e5e footer gray
• 666666 header gray (menu & subnav text)
• dddddd dark gray (message boxes in feed, input background)
• 999999 medium gray (visited links)
• ebebeb light gray (input focus, img border, border-tops/bottoms)
• aaaaaa light gray (cutetime, form border)

Image Sizes/Dimensions (in pixels)

• 175 x 109 (header logo)
• 100 x 63 (footer logo)
• 618 x 360 (feature banner image)
• 238 x 138 (feature box thumbnails)
• 353 x 206 (feature side bar image)
• 353 x anything (sponsors full ad size)
• 69 x 80 (portfolio thumbnails)
• 618 x anything (portfolio full image size)
• 150 x 110 (community thumbnail)

* Image sizes account for 1px border.

Version Control with CodeIgniter

When it came to redesigning yourarthere.net, we had a problem with the base_url() function regarding assets. Eventually we want to convert the v1 directory redirect to just a root url with the contents of the v2 directory in its place. Long story short, we found Shawn McCool’s lovely article on managing assets with CodeIgniter and followed his tutorial. All you have to do is add his path_helper file, autoload some helpers, and edit the applications/config/config.php file. Instead of using his function as asset_url(), we took it a step further by making it a version_url(). So our config looks like this:

$config[‘base_url’] = “http://yourarthere.net/”;

$config[‘version_path’] = ‘v2/’;

So now, whenever we call version_url(), we generate the base_url with the version_path. Below is an example of how we are linking an asset (replace parenthesis with correct php format):

<script type="text/javascript" src="(?php echo version_url(); ?)assets/js/validation.js">

Support page ideas

Here’s a quick mock-up for the sub nav for Support pages and a hierarchical structure. What do you all think about this?

Sublinks for Support section

1. Getting Started (keywords: “getting started”)
– What is hosting/domain names (graphic here)
– Why host with yourarthere.net?
— hosting packages designed for artists
— community
— simple pricing

2. Articles (keywords: articles)
– list
– of
– articles
– submit an article (email link)

3. FAQs (keywords: faq)
– articles
– frequently
– referenced or tagged with faq

Im not to sure about the copywrite staus of the truck image. I got it here. I thought that anything 50+ years old was fair game but maybe we should hold off on that one until I remake it with something safe.

The Difference Between Dashes and Underlines in SEF URLs

The Difference Between Dashes and Underlines in SEF URLs.

Inspirational Tags in web design – Pattern Tap

patterntap.com has a tag category…

Inspirational Tags in web design – Pattern Tap.

via Inspirational Tags in web design – Pattern Tap.