Above: the original documentation / presentation for agents. The live presentation covered use of the web application and best practices for online promotion of their clients’ listings. For best results, use the full screen button to view the slideshow.

Heavily modified component of Joomla! CMS

Provides real estate professionals with quick “listing sites” and management of their listings.

Front-end technologies include PHP, HTML, CSS, Flash, Ajax running on Linux, Apache, MySQL, and PHP back-end.

Interesting UI components include:

  • time saving multiple file upload (via Flash) bypassing browser’s single file upload mode.
  • automatic integration of YouTube listing videos
  • rich text editor for user input
  • visually attractive, sophisticated Flash mortgage calculator
  • automatic Google Maps interactivity
  • javascript slideshow in lightbox with shadow overlay
  • Ajax user contact form
  • agent backup with one click zip and download
  • 1 click sharing and promotion via integration of social bookmarking tool AddThis
  • optimized content delivery following best pratices guidelines of YSlow and Google Page Speed
  • combined, minified, and cached CSS & JavaScript using minify & YUI comprossersprited images, and lazy loading of specific components
  • time saving automatic fetching, parsing, and form populating based on single unique identifiers
  • Separate administrative and agent views
  • Ajax autocomplete fields

Above: Embedded sample videos. You can find the complete video collection at the Century 21 Alliance channel and my channel.

Overview: To increase exposure for agents’ listings and create compelling marketing materials for their clients, I created the following system.

Workflow: A real estate professional uploads multiple photos at once through a Flash interface to the company internal content management system running on Joomla. Nightly, a cron job runs a application written in PHP. The PHP application takes the photos calculates their dimensions, scales them to the appropiate size, and optionally adds padding if necessary to fit the required dimensions. This is accomplished with the GD and image functions.

Then depending on the requested duration per photo and the selected frame rate creates all of the inbetweens for the final video. The  application automatically creates the visually appealling affects of panning out to wider angles and adjusting the opacity to fade between photos.  It also “paints” the appropiate credits on to the end of the videos to comply with copyright requirements.

After several thousand frames have been created, the application passes the frames to FFmpeg.  Before final processing by FFmpeg, the soundtrack must be created to combine with the movie timeline. First, the total length of the video is calculated from the frame rate, number of photos, and requested time between transitions. The application the passes an ogg file to SoX for processing most notably looping music for longer videos and fading out the sound track as the end approaches, thus avoiding a sudden, harsh stop.

With the photos and soundtrack now ready, FFmpeg can combine the visual and audio inputs to produce the final output an MPEG-4 encoded video. This video is then automatically uploaded to YouTube’s servers using the Google Data API provided in the Zend Framework. The videos are then programmatically given a 5-star rating and completed with relevant information about the listing.