Category Archives: Web Development

May 20 2012

Project development interactive timeline

Reply

An inter­ac­tive time­line show­cas­ing the project’s mile­stones is now live at time​line​.keyzz​.com. Check it out!

The time­line was cre­ated using Time­lineJS, a open source frame­work to cre­ate inter­ac­tive time­lines that can pull media from dif­fer­ent sources. It is also avail­able as a Word­Press plugin.

Apr 20 2012

Photo Upload Functionality with HTML5

Reply

I imple­mented the upload inter­face for when users are list­ing a prop­erty. I decided to use a plu­gin that takes advan­tage of HTML5’s new File Reader API, the also new Drag & Drop API, and AJAX (with the addi­tion of binary data transfer).

The open source jQuery plu­gin is called File­Drop v0.1.0 and was cre­ated by Weixi Yen and can be found under MIT license at a Github repos­i­tory.

Apr 10 2012

Interactive Walkthrough Prototype Plan

Reply

I fin­ished the plan­ing for the inter­ac­tive pro­to­type that I will present on the Final Review on May 17th.

It con­sists of an inter­ac­tive walk­through with 4 sce­nar­ios and 16 indi­vid­ual tasks. It is divided in two sec­tions for the dif­fer­ent tar­get users: guests and hosts.

The users will be taken through the pro­to­type with popup guid­ing mes­sages made with jQuery. All the user have to do is fol­low the instruc­tions that pop up.

Click on the image to see the info­graphic (plan) in large format.

Interactive Walkthrough Prototype Plan

Dec 02 2011

NobleCount, the “proper” character counter

Reply

Noble­Count is a cus­tomiz­able jQuery plu­gin for a more improved count­ing of the remain­ing char­ac­ters, and han­dling of result­ing behav­iors, of a text entry object, e.g. input textfield, textarea. It counts how many char­ac­ters are being typed on a text field or text area, and pro­vides a feed­back to the user show­ing how many char­ac­ters are remaining.

It was cre­ated by The Prod­uct Guy, under dual licensed under GPL and MIT, and I will try to use it on text areas, spe­cially for pri­vate mes­sages between users and also on rental prop­erty def­i­n­i­tions, and prop­erty reviews.

Noble­Count by The Prod­uct Guy.

Nov 02 2011

Web Tech GDS Notes: Messaging System

Reply

Installed the fol­low­ing Dru­pal mod­ules to enable mail & mes­sag­ing func­tion­al­ity through­out the web application:

  • Pri­vate Mes­sages - Allow pri­vate mes­sages between users.
  • Pri­vatemsg Email Noti­fi­ca­tion - Noti­fies users about new Pri­vate Mes­sages via Email.
Oct 26 2011

Web Tech GDS Notes: Drupal Book Module

Reply

I decided to use the Book mod­ule that is avail­able within Dru­pal core to orga­nize the help sec­tion of the web appli­ca­tion as well as all the sec­ondary infor­ma­tion like Can­cel­la­tion poli­cies, Fake review pol­icy, Pri­vacy pol­icy, and Terms of service.

Here’s the link.

Oct 19 2011

Web Tech GDS Notes: CSS Grid Systems

Reply

After con­sid­er­ing the fol­low­ing CSS grid sys­tems I decided to use the 1140 CSS Grid on my project, both the Drupal-based and the pro­to­type versions.

I chose it for its ease of use, adapt­abil­ity for web apps, and the fact that it is based on a 1140 pix­els wide grid.

Accord­ing to W3Schools, 85% of dis­plays had res­o­lu­tions higher than 1024×768 pix­els in Jan­u­ary 2012.

The fol­low­ing CSS grid sys­tems were considered:

 

Oct 12 2011

Web Tech GDS Notes: Drupal 7

Reply

After research­ing avail­able mod­ules and func­tional require­ments of the project I decided to try build­ing the web appli­ca­tion using Dru­pal 7.

I installed Dru­pal at the sub­do­main live​.keyzz​.com and in it I installed the theme Zen, a theme cre­ated to be cus­tomized and built upon.