KidsCerts.com: an Award Certificate Maker for Students and Children

Note: Although I did the development for this site, I don’t carry its maintenance. If you visit it and you see some JavaScript errors, these were not in the delivered final version.

Note: this post was previewed and approved by the customer. Any potentially confidential information was blurred on the screenshots.

Completed: May 2014.

Kidscerts' Logo.
Kidscerts’ Logo.

KidsCerts allows easy creation of certificates for students and children. The niche market is parents and teachers and it features an user-friendly, easy-to-use interface written in HTML5 and jQuery.

Kidcerts.com home page.
Kidcerts.com home page.

In this project I took on a lead developer role. Our designer did the initial design in Photoshop and converted it to clean HTML5 templates. Then I did most of the coding, with occasional help from a a few freelancers we hired through Freelancer for graphics, rewriting, data entry, and other miscellaneous work.

Project coordination.

As we were a small team and the product owner was heavily involved during the process, we choose Trello for project coordination. Trello has a very intuitive user interface which is pretty straightforward even for non-technical users.

The Trello board we used for this project.
The Trello board we used for this project.

This is a screenshot of the project page (board) in Trello. You can see that there are several lists, each one containing several cards. This gives a quick visual overview of the project. Everything can be rearranged by drag and drop.

The timeline is along the right side. It is convenient to keep track of the progress of the project. You can also receive board updates via email.

A Trello board card detail.
A Trello board card detail.

This is the detail of one of the cards, where I discuss an improvement with the product owner. Trello does not have many of the features of other popular project trackers like reporting but we didn’t miss these for this project.

The previous site.

The previous design.
The previous design.

The original site was completly functional but the code and design was done to 90’s standards. It definitely needed a remake. There was little we could reuse from the user interface, so we decided to write it from scratch.

A new design

Here is a screenshot of the initial design made with Photoshop:

The new home page design in Photoshop.
The new home page design in Photoshop.

For the form designer, the tabbed input takes less space while being easy to use and visually attractive.

The new create page design in Photoshop.
The new create page design in Photoshop.

I really liked the way the designer structured the Photoshop project. He used a single PSD file with well-organized layers, which you can show or hide to see each individual feature.

Photoshop layer tree.
Photoshop layer tree.

The designer also delivered clean and table-less HTML5 templates:

Our initial HTML template.
Our initial HTML template.

Certificate creator user interface.

The user interface required highly customized forms and real-time updates. We used jQuery along with a mix of open source and custom plugins. This was a bit complex due to the amount of integration required but we got it working while achieving a fast and simple interface.

Kidscerts.com create certificate page.
Kidscerts.com create certificate page.

Tabs.

We used the EasyTabs jQuery plugin. It was a snap to integrate.

Frames.

We didn’t find any plugin for this, so we had to develop our own. It’s a jQuery horizontal hierarchical selector with several categories. Each contains several items. We found this very simple to use. It also took up little space.

There are also some frames which require a subscription. When selecting one of these, you will get an interactive tooltip asking you to subscribe. We used Tooltipster for these.

Tooltipster subscribe tooltip.
Tooltipster subscribe tooltip.

Text.

For the text inputs only CSS was required. We used msDropdown for customizing the dropdowns.

A jQuery rich text input.
A jQuery rich text input.

For the font chooser we used jQuery.customSelect. At the time of developing this, we couldn’t find a more specific one for this task. We used images instead rendering the fonts in the browser in order to speed up load times.

A jQuery font chooser.
A jQuery font chooser.

A customized version of the FontFace jQuery plugin was used for loading these fonts on demand.

For the color chooser, we used jQuery Simple Color. The original script didn’t allow us to use rounded borders for each color item, but the code was easy to customize.

A jQuery color chooser.
A jQuery color chooser.

Finally, for the multiline quote selector, we used imMultilineList. The possible values are populated automatically as function of the category selector at the left.

A jquery multiline select.
A jquery multiline select.

Backgrounds.

Custom backgrounds.
Custom backgrounds.

This is very similar to the frames tab. However, here you can also set the transparency level using a slider. We used the jQuery Slider plugin for it.

Registered users can also use custom frames:

Custom backgrounds deletion.
Custom backgrounds deletion.

These are stored on the server and can be reused or deleted:

Custom backgrounds deletion.
Custom backgrounds deletion.

We used the jQuery File Upload plugin for this.

Non-registered users will see the following interactive tooltip:

Custom tooltip for non-subscribers.
Custom tooltip for non-subscribers.

Live preview.

Below the form, there is a live preview of the certificate, which is updated as soon as you change anything in the form. This was custom developed.

In the images above, you can see that the live preview is resized automatically depending on the input area height, so its content is always visible.

PDF generator.

The old site had a functional pdf generator written in functional-style php. While a bit outdated for today’s coding standards, it well for the most part. Instead rewriting it from scratch, we decided to clean and refactor it, adding a few new features like the background transparency. Click here to download a sample PDF output.

We also made sure that the differences between the live preview and the pdf were minimal by comparing several screenshots in GIMP. Here is one of these. We made the browser output transparent, and then we placed it over the PDF one:

Checking the rendering differences between the browser preview and PDF versions.
Checking the rendering differences between the browser preview and PDF versions.

The maximum offset is 4px, due the different font rendering engines. While we could have improved these, we decided to stop here, as most people will not notice such small difference.

Members backend.

Kidcerts.com subscribe page.
Kidcerts.com subscribe page.

We decided to integrate aMember for subscriptions administration and billing. We chose 2Checkout as payment processor as we had positive experiences with it in the past. We skinned the members pages with a cleaned version of the old design. It was working well and looked acceptable so we left it. We will probably integrate it with the new design in a future iteration.

Kidscerts aMember integration.
Kidscerts aMember integration.

I can say that I’m happy to have driven this project to completion. Developing such a a complex jQuery interface was challenging, but also rewarding for the entire team. We will probably be adding more features in the future, and I will update this post accordingly.

Agile management project: Python / wxPython based realistic test data generator for databases (III): selecting developers

Note: this post was previewed and approved by the customer.

In order to post a bid on behalf of the employer in vWorker (adquired by Freelancer on November 2012), he must give me subaccount permissions in his control panel. This is pretty straightforward, and the employer has control over the permissions I will have in his account. To do this, the employer needs to log in to vWorker, go to My account → My subaccounts, click on Add new sub-account and then follow the instructions there.

Once this is done, I can log in to the employer’s subaccount. I use several browsers, one with my main account and others with different subaccounts, so I don’t need to switch the account constantly.

Now it’s time to post a new project by clicking on the Post a new project link at the top left of the page. It’s important to be clear and concise about what you need. On freelance sites like vWorker, a developer needs to place a lot of bids to win a single project, so it’s better to write a small specification on the bid page, and put a full specification in an attachment. Here is a screenshot of the new project page:

vWorker New Project Page
Full page screenshot of the vWorker new project page. Click to enlarge.

From four interested candidates, we selected two developers who were in a nearby timezone, communicated well, offered us a reasonable price, and had demonstrable experience with wxPython development.

We started with a small test (fixing a minor bug) using pay for deliverables. In this way the developer has a good idea of what the work will involve and we can know more about his work before starting the bulk of the project. These tests were successful, so we switched to pay for time, as we consider it better suited to agile development than pay for deliverables.

Agile management project: Python / wxPython based realistic test data generator for databases (II): defining an infrastructure

Note: this post was previewed and approved by the customer.

an infrastruture
An infrastructure (Soo Locks, source: http://en.wikipedia.org/wiki/Soo_Locks)

The customer already provided a complete high level project specification, so I will begin defining lower level requirements. First I will define an infrastructure for the project. This is a desktop application, which means defining infrastructure for it is usually simpler than it would be for a server application. We will use:

We divided this project into several iterations. In the first one we will use just two developers, so I will use just a few agile techniques (no product / sprint backlog and agile metrics for now).

I have found that many developers dislike the idea of using a heavyweight integrated development environment and prefer lightweight editors like notepad++, vi or emacs. But after many years as developer, I have found that a fully featured IDE saves a lot of time with features like code autocompletion, refactoring or the ability to show errors without having to compile the application.

Coding conventions are used to standardize the code structure and for improving code quality. Many developers prefer to do the coding “their own way”, but sometimes that is not an option when working in a team.

Basecamp will be useful for discussing high level features and milestones, as it provides a lot of collaborative tools customized to distributed software development: white boards, forums, project schedulers and trackers…

Low level development tasks will be managed via Trac, as it integrates pretty well a version control software (which allows to share the source code and see what each developer changed), a bug tracking system (where the issues and low level task are managed) and a wiki (what is useful for writing both internal and external documentation collaboratively). In the next articles I will explain more in detail how these work, and how I will use them in this project.

We will also use vWorker for selecting developers, and we will initially pay for deliverables, so we have a fixed cost. If the developers does a good work in the initial part we will consider using pay for time, as it give us more flexibility and it’s better suited for agile development.

Agile management project: Python / wxPython based realistic test data generator for databases (I)

Note: this post was previewed and approved by the customer.

I was recently hired as a manager via vWorker (adquired by Freelancer on November 2012) for improving a realistic test data generator for databases written in Python / wxPython. We already have a working prototype, and we are going to convert it into a commercial application.

A partial screenshot of the initial prototype
A partial screenshot of the initial prototype

After asking permission from the customer, I will describe here the steps and techniques that I will use to manage this project. I’m new to Python and wxPython, but the existing code is clear, so I don’t have any substantial trouble following it.

So, if you are curious about how a project is managed in vWorker using agile techniques, and you want to follow a real case, don’t forget to use one of the subscribe links in the right menu. Feel free to ask any questions or post a comment.

vWorker invites me to the new Tech Sherpa program

The vWorker.com site logo
vWorker logo

…and this is really great as they just invited 4 people for this new feature. So, what is a Tech Sherpa? From the vWorker latest news blog:

A Tech Sherpa™ is a cross-discipline expert with years of success both “climbing” (doing technical work) as well as “guiding” (managing others who do that work). A Tech Sherpa™ can take over some or all aspects of managing your project, and free you to focus on more productive things. Prices range from $25-$95/hour, depending on their skills and location in the world.

So if you want somebody to manage your project, including writing specs, hiring people, managing them, and testing the work, now vWorker offers you everything of these plus a employer triple-point money-back guarantee and a workforce of more than 300.000 skilled people. You can create an account (completely free) here. And if you want to create a project just for me, just click here.

You can learn more about what a Tech Sherpa is and the new project management feature in the vWorker site.

Update December 1, 2012. Freelancer.com acquired vWorker on October 19, 2012. So if you want to contact me, click on this link.