Web Design & Development Blog
This blog covers a lot of technical web development issues, focusing especially on Joomla, Drupal, and other open-source CMSes & platforms. Not all our posts are for web developers; we also make sure to write posts for those who are not technical.
15 May 2011 iPad / iPhone Browser Testing Tool
Web Design and Development
There's a very handy utility called iBBDemo2 that lets you test websites using an iPhone / iPad emulator. We used it with vineyardartsproject.org. It does not do a great job emulating video. For example, using standard YouTube embed code (an iframe), it renders a black box where the video would actually be, even though the video *will* run correctly on a physical iPhone. Other videos (e.g. locally hosted video) would be much harder to troubleshoot reliably using this tool.
It also seems that targeting for iPhone using CSS doesn't really work with iBBDemo2. For example:
27 April 2011 Plethora Design Concrete5 Article in Web Designer Mag, UK
We have written a number of blog posts on the Concrete5 content management system.
26 April 2011 VirtueMart Category Dropdown Module
Rather than writing it as a separate module, I have extended the the normal product categories module to have this as an option in addition to all the other options such as Transmenu, Links List, and so on. This should make it easier to incorporate in the next release since the work's already done.
The following is in use on a site running Joomla 1.5.23 and VirtueMart 1.1.8. You can download VirtueMart here. Download the "complete package", unzip it, and look in the modules directory for mod_product_categories_1.1.8.j15.zip. This is the module that need to be modified.
After making the following modifications, you will need to edit your categories module and set the category display type to "Dropdown select menu".
There are two file modifications and one new file:
- modules/mod_product_categories/mod_product_categories.php (modified)
- modules/mod_product_categories/mod_product_categories.xml (modified)
- modules/mod_virtuemart/vm_select.php (new file).
Paste this into a new file at modules/mod_virtuemart/vm_select.php:
20 April 2011 Phoca Download CommunityBuilder - new 1.6 plugin
We're pleased to announce a new version of our CommunityBuilder Phoca Download plugin. The new version works in both Joomla 1.6 and 1.5, and allows users to edit their files' titles and descriptions, and lets them delete their own files. We are working on adding more refined group-based access controls in the plugin parameters.
The editing interface is still a bit clunky and will also be improved.
22 March 2011 Internet Explorer 9 and Firefox 4, Finally!
Web Design and Development
It's been a long time coming, but Internet Explorer 9 and Firefox 4 are finally out. There is no doubt that these both represent major improvements to each respective browser.
For IE9, it means much better and more reliable web page rendering, including support for CSS3 effects like rounded corners.
For Firefox 4, it means tabbed browsing and hardware acceleration á la Chrome (for faster browsing). Firefox was starting to be eclipsed by Google Chrome on those fronts, and now has a shot at maintaining its lead. One reason for that is that Firefox has loads more addons that are also more mature than the ones Chrome offers. In addition - and this is admittedly a minor thing - Firefox has Print Preview and Chrome STILL doesn't. Let's give Google the benefit of the doubt and assume it's because they want to save the environment ... but if that were the case they should remove the Print function altogether!
You can install Firefox 4 alongside a previous version of Firefox by installing it into a separate Program Files folder (for those of you using Windows).
The Web Developer Toolbar extension for Firefox is already available for Firefox 4.
28 February 2011 Concrete5 Theme Installation Issues
Web Design and Development
Our original review of Concrete5 has gotten quite a response from the Concrete5 community, and I felt it was time for a closer look.
Some quick observations:
There are some really nice themes in the Concrete5 Marketplace
Installing themes could be made clearer. Here are some problems I had while trying to install a theme downloaded from the marketplace:
- Currently, you supposedly (according to many posts on the Concrete5 forums) have to unzip a theme's zip file and FTP the resulting folder to the /themes directory. Trouble is, if you download a theme from the marketplace using Add to Cart, many of them are actually "packages" containing some other stuff as well as a theme - in a sub-folder. If you follow the normal instructions, you would end up FTPing it to /themes rather than /packages, and then when you go to the theme admin area in Concrete5, you won't be able to install your new themes.
- I was trying to install a theme called Innovation, which I downloaded from the Marketplace. Unzipped, it creates a folder called 'cannonf700_innovation' which itself contains a folder called /themes/innovation. The contents of /cannonf700_innovation/themes/innovation should ACTUALLY go in /themes/innovation, which begs the question: where should the controller.php file in /root/themes/cannonf700_innovation/ go? The root directory? If that's the case, each time you install a new theme, controller.php gets overwritten.
- Zip files should be standardized so when unzipped, no additional work is needed beyond simply FTPing to /themes; perhaps with non-marketplace themes this works fine. Ideally, you'd be able to install via a web interface with no FTP at all.
As it turns out, the themes you download from the Marketplace are in fact zipped up as packages, so you must upload them to the /root/packages/ directory, then login to your site, go to your dashboard and go to Add Functionality. Then you can install your newly available themes. It's easy, but you have to know it. I had looked in various places on the Concrete5 including in the forums before I stumbled upon this explanation. I really like the idea of packages, but wonder why there is a separate way of installing themes at Pages and Themes. For the Concrete5 neophyte, this seems contradictory. There should be just one place to do that.
- When creating a new page, the page alias is created on the spot. In Joomla, you have to click save the article first.
- If you don't want to enter text in your new page just yet, Concrete5 won't force you, whereas Joomla does.
Concrete5 is very user-friendly for editors and site owners, and with a bit clearer documentation in the How-to's area of the Concrete5 site, it will see even faster adoption by those of us using Joomla and Drupal. I really wish Joomla had the kind of user-friendliness Concrete5 has. There are in fact some Joomla "alpha" projects that seek to do much of what Concrete5 already does, and does very well. I don't believe Drupal has any aspirations to emulate Concrete5's editing interface, either, though they should.
18 February 2011 Brooklyn Music School in New York Times
Brooklyn police officer performs piano recital at the Brooklyn Music School
We recently redesigned the Brooklyn Music School's site at brooklynmusicschool.org, which this New York Times blog article links to. The article covers the officer's preparations for his performance. A follow-up article will soon follow.
The Brooklyn Music School site has helped the school book its theater for various performances over the past two years, which was previously only a minor revenue stream for them. The newly redesigned is helping bring the BMS greater publicity.
13 February 2011 Formula for scaling objects
Web Design and Development
Remember high school algebra? Did you think it would ever come in handy?
Here's one everyday use for it: scaling images, videos, and iframes proportionally.
Suppose you need to resize an iframe, and your page editor doesn't automatically scale it for you.
Let's say it's 640x480 but you want it to be 500 pixels high by however many pixels high. Let's call this new height "X".
To figure out the correct height, just multiply 480 by 500 and divide the result by 640. In this case the new height is 375 pixels.
A simple formula would read:
(old height * new width) / (old width) = new height
Another quick way is to divide the old height by the old width, then multiple that by the new width.
Example: 480/640 = .75.
.75 * 500 = 375
So another formula would be:
(old height / old width) * new width = new height
11 February 2011 CSS3 Rotation Mania
Web Design and Development
With CSS3 it is now possible to rotate divs, images, iframes, and more. Here's a basic example:
Hover over this CSS <div> to rotate it!
Works in Firefox, Chrome, and IE 9. Rotating HTML text in Firefox (3.6.13, anyway) can result in ugly text, so using an image instead of text would be advisable.
02 February 2011 E-mail Distribution List with Joomla
Recently we needed to set up a simple e-mail distribution list for a client, so that when anyone sends an email to "email@example.com", it gets sent to a list of recipients.
That sounds like a simple thing, but is not as easy as it appears, at least not with cPanel - in our case, anyway. An unmodified installation of cPanel would normally include a way to create a mailing list (in the Mail area). That uses Mailman. However, some hosts turn this feature off because it uses too much CPU. There are not very many third-part alternatives out there; we looked at Minimalist and Dada Mail, and also looked into installing Mailman manually. This all seemed like overkill for something that should be a simple task.
The other possibility would have been to add an email forwarder in cPanel, using a comma-separated list of recipients. That is apparently possible in some cPanel installations, but not in our case.
The solution we finally settled on is called Mailster, which is a Joomla add-on. It retrieves the mail from a POP3 or IMAP account and sends it to your recipients, using either an SMTP connection or the default Joomla mail settings. It also comes with a Joomla content plugin that allows you to create a signup form within a Joomla article. Getting Mailster configured was pretty straightforward; you just need to know your email address's connection settings for POP3 / SMTP.
If we weren't using Joomla on this customer's site, we might still be looking for a simple distribution list solution. This was a great find, and we hope this helps someone else too.
- In the works: Free Generation Africa
- PayPal's Shipping Calculator has Major Usability Flaws
- Joomla 1.5 Flash Ads with AllVideos Reloaded
- Flash Ads with Joomla's Banner System
- Joomla 1.6 is Here!
- Fixing Itemids for Joomla / K2's tag view
- Adding a Joomla Banner Ad (Image or Flash)
- Update your Facebook status with Twitter
- Joomla / K2; disabling modal image popups on some items
- Conditional CSS and ASP.net themes
Page 2 of 5