Using the designs and Flash sections from Future Friends, ALPHA developed custom content modules that managed Brooklyn Brewery’s Flash blocks and helped to integrate the visual elements into a cohesive, functional website. By converting the existing site architecture to an open-source marketplace and shopping cart, ALPHA gave Brooklyn Brewery a flexible framework to easily accommodate future features for their refreshing new domain.

The Colorpicker behaves as one might expect – by clicking into the color field, a popup box will appear. Any selection made in the popup will be populated into the text field as a hex value.

This article will outline how to add the color picker to the custom modules created in the previous link. See the image below for how it will appear.

1) Create the Colorpicker.php file in /lib/Varien/Data/Form/Element/. This file will contain the Colorpicker class. It will only contain two methods (constructor and getElementHTML) and will be based off of the textfield input type. The getElementHTML method the renders the final HTML to the screen (a color box positioned to the right of a textfield). The class in all it’s glory can be downloaded here.

2) Add JS libraries. We’re using the excellent Color Picker found here. Under the Magento root, create a directory under js named colorpicker (lowercase) add add the following files: colorPicker.css, colorPicker.js, yahoo.color.js. There should also be an img directory for the colorpicker popup – be sure it is included as well. ColorPicker requires prototype.js, yahoo.color.js, and script.aculo.us. With the exception of yahoo.color.js, the others should already be present in the Magento project tree.

3) Update main.config (/app/design/adminhtml/default/default/layout). This will instruct the admin site to include the necessary CSS and JS files. The files are listed below:
colorpicker/yahoo.color.js
colorpicker/colorPicker.js
colorpicker/colorPicker.css

4) Usage. Ok – so everything is setup up for you to use the Colorpicker. I will assume that you are using the custom module creator and have a file named Form.php (within a custom created module named Events) In the _prepareForm method, you will add the new input type as follows:

$fieldset->addField('primarycolor', 'colorpicker', array(
'label' => Mage::helper(‘Events’)->__('Primary Color'),
'class' => 'required-entry',
'required' => true,
'name' => 'primarycolor',

));


I hope this article was helpful. Again, if you find yourself having to customize Magento, you really have to check out the custom module. Big thanks to Ben Roberts for helping put all the pieces together.

Bottom line: it rocks.

We’re not going to sit here ranting and raving about something without giving you the facts. Recently we had the opportunity to launch
a client site using SilverStripe and here is what we found:

1) Reduced development time when compared to Wordpress. Designers don’t have to wrestle with the Wordpress loop. SilverStripe is a true CMS, not a hacked impostor. Creating a theme was smooth and fast. It was easy to create page templates for each of our page types and then select which pages would use them.

2) More out of the box features. Google Sitemap, SEO meta data, captcha, caching, form editor/creator are available from the moment of installation. SilverStripe may not offer many modules as compared to other platforms, but out of the box, it offers a powerful list of common features that all CMS platforms should encompass.

3) Easily extended. SilverStripe is built on a well thought out MVC framework called Sapphire. If you have any experience using MVC (CakePHP, Symfony, Ruby on Rails), extending SilverStripe is quick and does not violate core code or pollute the overall code base. Often, we deal in a gray zone between existing features and new custom features and SilverStripe addresses the issue well.

4) Well documented API. We were amazed at how quickly we were able to tweak our templates to get exactly what we wanted without creating much custom code, with just familiarizing ourselves with the powerful API.

Ah, now for some of the drawbacks that we discovered:

1) It’s new. The community isn’t as robust or as large as more established open source initiatives. Not yet.

2) Upgrade path still manual. It’s still a manual process to upgrade SilverStripe unlike the more push button wizard-like interface available with WPAU.

3) Theme editiing. Cannot select a different them via the admin backend, nor can you perform theme edits from the Admin backend. The latter is not an issue for us, since all our files are source controlled, and editing the file online would violate this.

We’re pretty confident that SilverStripe has a great future and we’re looking forward to future releases and improvements. I encourage you to check them out and see if their solution works for you and become part of the growing community.

Alpha was provided initial designs by Rocketshop Design and developed the static design comps into a robust content management system. In order to provide the site visitors with relevant information, the site also integrates with a third party trip planning tool that enables visitors to create a trip plan that includes bus and rail routes.

Our development decisions have proven to be scalable such that new features can be added in with little development time, ensuring that the CTRAN is capable of sustaining the demand from their large online audience. We continually work with CTRAN delivering new features and perfecting the user experience.

The new year brings many exciting new prospects that we will be investigating and discussing on this blog. We are constantly reviewing new technology, almost at an exhaustive pace, constantly inspecting how a new piece of software or technology approach can improve our efficiency and quality.

The short list (I’ll keep it brief):
1) Rails 3 (Notably Merb is being merged into Rails 3 to further provide more options for developers). Rails is getting better and better. Any excuse of it not being enterprise ready are immature at this point.
2) Symfony 1.2. Although released in 2008, we have not had time to explore the new API. Perhaps the biggest change is Doctrine is now a first class citizen (like Propel), giving developers an ORM choice. The Alpha team are big fans of the Symfony framework and we look forward to giving the new API a thorough review.
3) Silverstripe CMS. An incredible new open-source CMS and application framework (Sapphire) is on the internets and it’s not getting the fanfare it deserves. From our initial investigation, Silverstripe looks awesome and incredibly powerful and easy to use. We took it out for a test drive and we’re impressed in what we found.
4) Cloud Computing. There are several new hosting solutions out there offering robust cloud solutions to the masses. One such outfit is Mosso. Look for them to release SSH and root access in Q1 2009. With their existing tools and hardware in place, it will be a product offering many developers can not do without. It is certainly one we are eagerly anticipating.

Look for upcoming blog posts exploring each of the above listed items in detail with practical code examples.

Big thanks to the design and development team that made this happen. We pulled out all the stops and we’re really happy with the results. After being incredibly busy for the last year, it was very rewarding to have finished this in 2008.

Alpha sat down with Allison and together crafted the scope of the site, from targeting her desired audience to identifying which specific features Lanikai required. We were faced with the challenge of marketing an exclusive area to a target audience that ranged from first-time home buyers to older families looking to relocate. We also needed to balance the message so that Lanakai could reach out to clients from both the mainland as well as local Hawaiians. We kept in mind that the majority of clientele would be older and more established, expecting the island repose that Hawaii is known for. Working from an information architecture plan, we set to work building a site that would have both a glimmer of nostalgia and a personal allure that would emotionally connect prospective clients to Allison Green. Stylistically, we achieved our goal by showcasing the properties on a platform that kept the site interactive, visually compelling, and engaging. From a development standpoint, we worked to convert the design into XHTML through cross-browser testing. The result was a one-of-a-kind website that spoke to individual visitors, a web-based welcome mat.

As we continued our dialog with Allison, we were able to integrate Search Engine Optimization for Lanikai, post-launch. Our design helped establish a solid foundation that made the implementation process efficient and provided an uninterrupted experience to those clicking on the site. We integrated additional content creators to the home page to increase keyword frequence, we renamed URLs, and a we brought in a Wordpress blogging as a CMS. Our modifications helped to streamline and enhance the Lanikai online experience, while preserving the exemplary website that we worked to create.

What was the most challenging aspect of the project?
Creating a unique design that would really set Lanikai Properties apart from the rest of the pack but at the same time connecting with their target audience was difficult. I think stylistically, we have achieved our goal. From a development standpoint, converting the design into XHTML was a real challenge that really pushed our development, especially during cross browser testing.

How did Search Engine Optimization influence your design and application architecture?
Unfortunately, SEO was a follow up project and did not influence design or our application selection/development at all. However, the impact upon the design and development during the SEO phase was significant. Additional content containers were added to the home page to increase keyword frequency, much of the copy was re-written and several of the URLs were renamed. We used the Wordpress blogging engine as a CMS, and these modifications were fairly straightforward.

The client’s primary request was that we create a visually arresting site that had a transparent, intuitive back-end, so that staffers in the field could make updates to the content quickly and easily without the need for our assistance. We designed the entire site so that it could be juiced by Wordpress. This enabled us to take advantage of Wordpress’ eminent blogging feature.

ALPHA crafted a website around this architecture that showcases various stops along the tour, providing in-depth supplementary information about cottonseed oil and its myriad of uses, from its use by popular potato chip companies to its oft-ignored health benefits. The site’s blog features tour news and incorporates content management tools that allow for simple updates from any web browser. Additional search-engine marketing helps support the site and draws fresh traffic.

What were some of the specific features that the client requested?
The only pressing technical feature was that the client needed to be able to update site content easily and quickly. The site would follow a larger marketing and PR campaign, and staffers from the field needed to contribute from the road. This was accomplished with a Wordpress Blog. The entire site is powered with Wordpress, and the blogging feature, which is what the staffers really needed, is a basic out of the box feature with Wordpress.

Alpha began by identifying CompView’s target audience and produced use cases along with streamlined Information Architecture. These use cases were essential to the restructuring because they helped to identify how CompView’s target audience would interact with the site, and what specific information potential clients would look for.

After extensive surveying, Alpha became convinced that CompView needed to pare down the focus of their website in order to produce a succinct user experience. They agreed, and we built the site with a emphasis on two primary demographics, while CompView augmented their off-site marketing in order to reach their enormous client pool.

CompView’s web administration staff was looking for a simple way to update site content without using Dreamweaver or FTP. Keeping this in mind, we created a custom content management system (CMS) that enabled them to both modify text, manage their case study gallery, oversee their product inventory, and upload supporting documents. It was also necessary for the site to integrate with Infocommiq, a third-party product catalog vendor used in the electronics industry. We were able to achieve these goals with updated and unique application architecture.

Search Engine Optimization played a special role in our design of the CompView site. The top navigation needed to be flexible enough to accommodate the often verbose SEO navigation title, while also having a design that could store several copy-heavy content buckets. The CompView content allowed us to identify target words and phrases early in the project, which helped to guide us as we rewrote the copy. Each of our content types needed to support meta-data as we reached the application phase, both page content and module types. Most of the meta-data was managed via the CompView custom CMS, but some of the higher-level meta-data needed to be stored in a configuration file for performance purposes.

We were lucky to start with a company who had the happy predicament of outgrowing its previous website. By working with laser-precise focus we were able to identify the inimitable and necessary traits that would keep CompView a dominant force in the A/V field.

What was the most challenging aspect of the project?
After initial surveys with the staff at CompView, the target audience was exceedingly broad, and they were clear that the site needed to address each of these distinct user groups. Our initial discoveries involved us creating several user funnels that would have to translate into a succinct user experience. However, after further research, we realized that we could not accommodate every user group and recommended that we only target the top two demographics which would allow us to focus on a tighter Information Architecture and design. The client agreed, and internally, it forced them to refocus their off-site marketing.

What were some of the specific features that the client requested?
Although the web administration staff are web savvy, they were looking for a simple way to update content on their site without using Dreamweaver and FTP. We created a custom content management system that enabled them to not only modify text on the site, but also manage their case study gallery, product inventory and upload supporting documents as well. The site also had to integrate with Infocommiq – a third party product catalog vendor used in the electronics industry. This was accomplished through the application architecture.

How did Search Engine Optimization influence your design and application architecture?
Heavily. We used an external SEO consultant and engaged him early in the process. The content was available early in the project, so it allowed us to quickly identify key words and phrases that we should be targeting and involved a fair amount of the content to be rewritten. From a design perspective, this influenced the top navigation as it had to be flexible enough to accommodate the often verbose SEO navigation title. Additional, the design had to have accommodate for several content buckets, that would contain further copy. From an application standpoint, we had to design each of our content types to support meta-data, whether it was a page content type or a module. Some of the meta-data was managed via the custom CMS, but some of the higher level meta-data was stored in a configuration file (for performance purposes).

Alpha worked with Pistils to design a Wordpress-based content management system (CMS) that would meet their needs. The main challenge we faced with was streamlining a website that was heavily inundated with graphics. It was imperative to make the site functional, not just visually stunning. We took special consideration to preserve the specific font treatments that were specific to Pistils, and we used SiFR technology that would load the font using a Flash platform with pixel-perfect implementation. Using the Wordpress framework, we created search engine friendly URLs, enabled a SEO Meta Plugin, and made sure that Pistils would continue to rank well as their content ideas flourished.

What was the biggest challenge your team faced during the project?
The challenges included converting a graphic rich design into a functional web site. Special consideration had to be given to the specific font treatments that the client was resolute on keeping. To preserve the font treatments, Alpha used SiFR technology that would load the font using Flash. It is a wonderful design, and we were commited to deliver a pixel perfect implementation.

How did Search Engine Optimization influence your design and application architecture?
We were certainly mindful of SEO despite not having a hard requirement to do so. The information architecture and content analysis considered how it could be done within the Wordpress framework. This included creating search engine friendly URLs and enabling the SEO Meta Plugin. The strength of the site is in it’s content – the team at Pistils is determined to rank well and there is no shortage of content ideas.