Back-end architecture and server-side information:
The site is hosted using the common LAMP software solution stack controlled and maintained via cPanel and ssh access.

It runs Joomla 1.5, a free open source CMS and MVC web application framework.

A modifed version of minify, another PHP tool, optimally delivers the site’s JavaScript and CSS. The site also incorporates most of the YSlow and Google Page Speed best practices.

To futher optimize the ouput, the modified version of minify invokes YUI compressor, a Java tool, a further compresses the JavaScript and CSS using techniques such as local symbol replacement.

User Interface Design Choices:
The front end compromises several interesting features – many from the YUI Library.

Since all page transitions are controlled via Ajax giving a visitor that fastest, most fluid user experience, the browser history manager tracks the state of the application at all times so that the forward and back buttons maintain their functionality across all “A” grade browsers.

As the user hovers over points of interest in the application, the tooltip provides and draws attention to relevant, contextual information.

The local market data is tied to a data store of all the known markets. As the user types, the field offers autocompletion regardless of whether the user searches by city or zip code.

The chart itself is created dynamically using the Google Chart API and then watermarked using the PHP GD library. The results are cached for set intervals.

The tabs of the market data provide convenient views in a small amount of space.

Dialogs and modal panels with shadow overlays engage the user during specific actions to maximize their attention.

The weather module provides useful information about current, local weather from the National Weather Service. PHP parses their freely available XML data feeds and stores the results.

Both the weather and the market data are customized further depending upon how the user enters the page. The site is part of a Google Adwords Campaign and as such, if the visitor enters with certain information in the URL (passed as GET variables based on their Google search), the user will see customized results for both the weather and market data. Compare http://www.c21gt.com/?kw=Springfield to http://www.c21gt.com/?kw=19081. The server will also reverse lookup school district information to location to account for those searches.

The layout of the page is controlled via CSS. Some points of notes are the sprited images and the image-free rounded corners.

For many, more details about the site and several features not discussed, please feel free to contact me. Walk-throughs are available via dimdim

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 comprosser, sprited 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.