I finally put together a page with links to all main elements of the project. It’s at www.keyzz.com with links to the prototype, this blog, the development timeline and to my personal online portfolio.
An interactive timeline showcasing the project’s milestones is now live at timeline.keyzz.com. Check it out!
The timeline was created using TimelineJS, a open source framework to create interactive timelines that can pull media from different sources. It is also available as a WordPress plugin.
I implemented the upload interface for when users are listing a property. I decided to use a plugin that takes advantage of HTML5’s new File Reader API, the also new Drag & Drop API, and AJAX (with the addition of binary data transfer).
The open source jQuery plugin is called FileDrop v0.1.0 and was created by Weixi Yen and can be found under MIT license at a Github repository.
I finished the planing for the interactive prototype that I will present on the Final Review on May 17th.
It consists of an interactive walkthrough with 4 scenarios and 16 individual tasks. It is divided in two sections for the different target users: guests and hosts.
The users will be taken through the prototype with popup guiding messages made with jQuery. All the user have to do is follow the instructions that pop up.
Click on the image to see the infographic (plan) in large format.
I have finished creating a Drupal theme based on Keyzz visual design. The theme was constructed using a starting theme called Zen as its starting point and the 1140 CSS Grid as the css grid system.
NobleCount is a customizable jQuery plugin for a more improved counting of the remaining characters, and handling of resulting behaviors, of a text entry object, e.g. input textfield, textarea. It counts how many characters are being typed on a text field or text area, and provides a feedback to the user showing how many characters are remaining.
It was created by The Product Guy, under dual licensed under GPL and MIT, and I will try to use it on text areas, specially for private messages between users and also on rental property definitions, and property reviews.
Installed the following Drupal modules to enable mail & messaging functionality throughout the web application:
- Private Messages - Allow private messages between users.
- Privatemsg Email Notification - Notifies users about new Private Messages via Email.
Here’s the link.
I chose it for its ease of use, adaptability for web apps, and the fact that it is based on a 1140 pixels wide grid.
According to W3Schools, 85% of displays had resolutions higher than 1024×768 pixels in January 2012.
The following CSS grid systems were considered:
- Foundation by Zurb
- Golden Grid System
- Couzinhub Fluidgrid
- 1140 CSS Grid