< Back
Weekend Web Development
Return to Top Top ▼ Newest First

Category: week4

Week 4, Day 4: Front End

posted Friday, June 24 2016 @ 7:50 pm EST

There's still a few things left to do here, but finally the website is pretty much done. Nothing like feature creep to keep you working.

Live URL: http://sstilesphotography.com/

Key Features:
• Templates, plugins, and content managed via WordPress 4.5.3.
• Heavily customized theme built from the ground up in Bootstrap 2.3.2.
• Photo galleries:
    • Offload image hosting to Google Drive to reduce load on site.
    • Accommodate one large preview image.
    • Up to 7 smaller thumbnails at once.
    • Any number of additional images as well.
    • In "Project Gallery" mode, List View shows all images in gallery.
    • Click the large preview image to see modal popup with full image.
    • Click any other thumbnail to jump directly to that image.
• Social sharing toolbar supporting Twitter, Google+, and Facebook.
• Page embed integration with Sam's Facebook page.
• Custom plug-in to provide PHP contact form in Home view.
• For ease of use, Project galleries and Blog posts are created the same way
    • Just make a post in WordPress, write some text.
    • If it's for the Blog, that's it, just publish!
    • If it's a gallery, add images, a thumbnail, check 'project' category.
• Project list: attractive thumbnail view using 'featured image' from each post
• Blogs and galleries both have well-formatted comments sections supporting nested reply threads.
• Archive view, accessible from the sidebar, shows all the posts from a given month, both project galleries and blogs.
• Download view automatically pulls in a specified archive from Google Drive to provide downloads of commissioned works.
• Scheduled backups via Gmail run automatically three times a week.
    • Google Analytics for traffic monitoring.

What's left to do:
• Write usage guide for Sam.
• Set Sam up as an additional admin on the WordPress site.
• Associate Sam's domain name with the site.

//www.youtube.com/embed/cNp65uFfxK0?html5=1&autoplay=1&showinfo=0&modestbranding=1&rel=0 Home view. A list of Project galleries, shown as thumbnails. A project gallery. The list of blog posts, but there's only one here at present. A blog post. Archive view shows both galleries and blog posts. The download page.
(Click to read more)

Week 4, Day 3: UI Development (cont.)

posted Thursday, June 23 2016 @ 7:37 pm EST

It took a long time, but things are starting to look a lot more complete now. The site is currently using placeholder images, as Sam only just recently got his photos over to me, but all the layouts are complete at this point.

Front page, contact form, sample gallery. List of project galleries. Gallery with placeholders. List of blog posts. Single blog post view. Multiple comments to demonstrate nesting. The archive view displays both projects and blogposts. Projects display their gallery thumbnail. Download page.

Next time: finished implementation!

(Click to read more)

Week 4, Day 2: UI Development

posted Tuesday, June 21 2016 @ 7:56 pm EST

I didn't get very far into implementing this mockup before hitting my first snag: Neocities does not support the uploading of PHP files for free accounts. This is a problem because most of WordPress consists of PHP files! As such, it was necessary to find a different hosting solution, which can be challenging because most free WordPress hosts won't let you use custom themes or layouts for free. I ended up settling on Byethost, which allows you to manually install WordPress, add custom themes, and even run a MySQL database, all for free.

The next sticking point was getting custom JQuery scripts set up with WordPress Enqueue, which would have taken much less time if I hadn't been missing a simple typo and pulling my hair out over every technical solution I could think of.

Overall, far less progress than I would have liked, but here's where we are:
• Set up hosting with Byethost, including FTP and MySQL.
• Installed WordPress 4.5.3
• Installed and began configuring a custom theme using Bootstrap 2.3.2.
• Got custom JQuery scripts working, after much trial and error.
• CSS fix for WordPress admin bar overlapping theme's top navigation.

Not going to bother with screenshots tonight, because the site currently just looks like any default Bootstrap demo. I'll be AFK for a large chunk of tomorrow, but I should hopefully have some time to work on this in the afternoon and evening. Next post will most likely be Thursday evening.

Next time: finished mockups!

(Click to read more)

Week 4, Day 2: UX Design

posted Monday, June 20 2016 @ 8:00 pm EST

Because I'll likely be busy tomorrow, I'm looking to get something of a head start today. Ideally this will be the first of two blog posts.

UI Spec:

• Top Navigation (*)
    • Logo: links to home
    • Home
    • Projects
    • Blog
    Not 100% certain a top nav is needed this time, may decide to skip it later.

• Home (/)
    • Background will be several large, high-rez photos from Sam's portfolio.
    • Small sample gallery and intro video.
    • Contact information (name, email, phone #) readily available.
    • Email form to contact directly via website.

• Projects (/projects)
    • List of projects, each linking to a gallery page.
    • Thumbnail for each.

• Project Galleries (/projects/<project_name>)
    • Loads project images from Google Drive.
    • Current / previous next view
    • List view

• Blog (/blog)
    • Sam said he isn't looking to blog much, but it would be good for SEO.
    • Basically just the usual WordPress news page, themed to match the site.

• Download (/download?id=<download_id>)
    • Accepts a URL parameter to provide a download of a corresponding ZIP file on Google Drive.
    • Loads project name, customer name, from accompanying XML in same folder, displays on page.
    • Gives an error message without URL parameter, or if ID is not found.

In interest of expediency, I'm doing the flowchart and wireframes by hand this time.
It doesn't look quite as nice, but it's a lot faster.

Flowchart:

Flowchart

Wireframes:

Later today: mockups!

(Click to read more)

Week 4, Day 1: Research and Planning

posted Monday, June 20 2016 @ 6:40 pm EST

This project is now complete!
See it here: http://sstilesphotography.com/
Or, keep scrolling to read more.

Our Company: My brother Sam is a photographer, and in addition to working for Motif magazine, runs his own small business "Sampson J Photography". He has asked me to create a WordPress site to replace the very rough-around-the-edges Wix portfolio he's using currently. I've been planning to include a WordPress site in this challenge regardless, so this seems a good opportunity to actually help out, rather than just making another fictional business demo.

Our Audience: Sam has done work for assorted special occasions, weddings, and even a documentary. There's probably more I'm not aware of. Our audience is anybody looking to hire a photographer for their event(s), so primarily I'm creating a platform where Sam can showcase his work and demonstrate his talents.

Use Cases:
    • View galleries of Sam's work and assess his skills as a photographer.
    • Availability and contact information.
    • Provide download of completed photo work to customers.
    • Needs to be easy for Sam to update and add new content without doing any coding.
    • Google Analytics.

Content Strategy: The front page will have his contact information and a sample of his work readily available. A selection of galleries from various projects will be available as well. Customers who have hired Sam will be able to access their files via a password he provides them with.

To start with, the site itself will be hosted on Neocities, the photos on Google Drive, and the videos on YouTube (which is to say, much the same as was done with Kūsō Neko Pāku). When Sam is ready to make the move to WordPress.com, that will be as simple as just copying the files over from Neocities.

As WordPress sites go, this one isn't really going to involve very much blogging. We primarily need it to act as a CMS for Sam to create new galleries and add photos to them. Since this is the first website I'm doing for a real business, it seems prudent to hook up Google Analytics tracking for visitor statistics, too.

Tomorrow: spec, flowchart, and wireframes!

(Click to read more)