Alexander on Web Development

After a more than a couple 24 hour coding marathons today I am very proud to announce that Dialogo Digital (http://dialogodigital.com, #EditoresDialogo) launched it's redesign to the public. The modern design was conceived and created by web designer Joel Martínez of String Puerto Rico (http://stringpr.com/) in late September 2009. It took me around 8 weeks to convert Joel's standards compliant XHTML into a full Drupal theme.

Three main templates were developed: one for the front page, one for the news sections, and one for the news articles. At least two other templates were created, and in the near future I will be creating other templates to house the photography and video section. Unlike the first Dialogo Digital redesign I made back in October 2008, this time I relied heavily on Drupal's ImageCache, Views and CCK module projects for almost everything instead of relying too much on my own SQL which can be harder to modify. For the main slideshow a custom JQuery script was used in conjunction with some hand written SQL stored procedures housed on my own module which I called DD2Components. The other two slideshows present on the front page were created using a mix of Views, the Views Slideshow module for Views, and a healthy dose of CSS overriding.

One of the components that surprisingly took me a lot of time was the small "widget" located on the top right position of the page that links to the digitized print versions of the newspaper. Instead of monkeying with CSS, I relied on Flash. The trick was importing node data from Drupal into Flash. While I admit I was tempted to create my own SQL queries and module from scratch, I decided to extract the necessary data from Drupal using Views. A combination I had never tried before, I managed to find a module for Views that allows to print data from Drupal in various XML and RSS formats - just what I needed. I almost fall back to creating my own module and SQL, but in the end I managed to successfully mix Drupal Views with a Flash animation - something I am very excited about since it opens a lot of future opportunities.

Most of the modules in the website got an update - the Image module included. The latest version of the Image module comes with Views support, something that makes theming much easier. That's because Views tries to rely as much as possible on CSS for styling, and CSS is easily modified using Firebug. On the other hand, traditional Drupal theming relies on theming functions - a combination of PHP code (or theming hooks), .PHPTemplate templates, and CSS. Thus, Views theming generally takes place in one place, traditional Drupal theming takes place in three.

While for the last year the Dialogo Digital relied exclusively on me to update their advertisements, this year I opted to integrate into the design the OpenX advertising management system. OpenX is made is Open Source, made with PHP and MySQL, and free to download from http://openx.org. The integration of OpenX was fairly simple. The thought of placing OpenX ad embed scripts inside Drupal blocks did pass through my head, but ultimately I decided to put print them using a theming hook and a .phptemplate file. OpenX embed codes can be very long, and since my .phptemplate code was looking so clean I did not want to mess it up with lots of JavaScript.

In terms of third party integration with contributed modules the Twitter module was a must, and support for Flickr, Youtube, Blip.tv and other media was provided by Embedded Media Field for CCK (http://drupal.org/project/emfield) which basically allows any kind of content imaginable under the sun to be integrated into the publishing workflow. The publishing interface was also tidied up with the Vertical Tabs module.

Finally, instead of getting in our Google Analytics reports hundreds of visits to the site's administration page (from Dialogo Digital own staffers) a dedicated Google Analytics module now filters out visits to administration pages, meaning that when we say we got 4,000 thousand visits in one month we are not cheating anybody ;)