Web Design & Development Blog

15 May 2011 iPad / iPhone Browser Testing Tool

category:
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:

@media only screen and (max-device-width: 480px) {
#somedivtag{
width:300px;
}
}

27 April 2011 Plethora Design Concrete5 Article in Web Designer Mag, UK

category:
News

We wrote an article about the Concrete5 CMS for issue 182 of Web Designer Magazine, currently on sale in the UK. If and when it is published online, we'll provide a link here. 

We have written a number of blog posts on the Concrete5 content management system. 

26 April 2011 VirtueMart Category Dropdown Module

category:
Joomla Developers

VirtueMart is an e-commerce component for Joomla, and it comes with a module called Product Categories (mod_product_categories). This module comes with several display options, such as a link list, CSS menu, and some JavaScript menus. Strangely, though, it does not come with a dropdown select option (a <select> menu). This post will show you how to add that option. This VirtueMart core modification also adds a "selected" attribute to the currently selected <option>.

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).

Modify modules/mod_product_categories/mod_product_categories.php:

After:

case 'tigratree':
/* TigraTree script to display structured categories */
include( $vm_path . '/vm_tigratree.php' );
break;

Paste this:

//product categories select mod
case 'select':
include( $vm_path . '/vm_select.php' );
break; 
//

Modify modules/mod_product_categories/mod_product_categories.xml:

After:

<option value="dtree">dTree</option>

Paste this:

<!--product categories select mod-->
<option value="select">Dropdown select menu</option>
<!--end-->

Paste this into a new file at modules/mod_virtuemart/vm_select.php:

<?php
//plethora mod

if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );

global $mosConfig_live_site, $mosConfig_absolute_path;

if( vmIsJoomla('1.5')) {
	$live_module_dir = $mosConfig_live_site.'/modules/mod_virtuemart';
	$absolute_module_dir = $mosConfig_absolute_path.'/modules/mod_virtuemart';
} else {
	$live_module_dir = $mosConfig_live_site.'/modules';
	$absolute_module_dir = $mosConfig_absolute_path.'/modules';
}
/*change following:*/
$params->set( 'module_name', 'ShopMenu' );
$params->set( 'module', 'vm_transmenu' );
$params->set( 'absPath', $absolute_module_dir . '/' . $params->get( 'module' ) );
$params->set( 'LSPath', $live_module_dir . '/' . $params->get( 'module' ) );

//include_once( $params->get( 'absPath' ) .'/Shop_Menu.php' );

global $my, $db;

//$mbtmenu= new Shop_Menu($db, $params);

//$mbtmenu->genMenu();
require_once(CLASSPATH.'ps_product_category.php');
$ps_product_category = new ps_product_category();

function get_category_tree_select( $category_id=0,
				$links_css_class="mainlevel",
				$list_css_class="mm123",
				$highlighted_style="font-style:italic;" ) {
		global $sess;

		$categories = ps_product_category::getCategoryTreeArray(); // Get array of category objects
		$result = ps_product_category::sortCategoryTreeArray($categories); // Sort array of category objects
		$row_list = $result['row_list'];
		$depth_list = $result['depth_list'];
		$category_tmp = $result['category_tmp'];
		$nrows = sizeof($category_tmp);

		// Copy the Array into an Array with auto_incrementing Indexes
		$key = array_keys($categories); // Array of category table primary keys
		
		$nrows = $size = sizeOf($key); // Category count

		$html = "";

		// Find out if we have subcategories to display
		$allowed_subcategories = Array();
		if( !empty( $categories[$category_id]["category_parent_id"] ) ) {
			// Find the Root Category of this category
			$root = $categories[$category_id];
			$allowed_subcategories[] = $categories[$category_id]["category_parent_id"];
			// Loop through the Tree up to the root
			while( !empty( $root["category_parent_id"] )) {
				$allowed_subcategories[] = $categories[$root["category_child_id"]]["category_child_id"];
				$root = $categories[$root["category_parent_id"]];
			}
		}
		// Fix the empty Array Fields
		if( $nrows < count( $row_list ) ) {
			$nrows = count( $row_list );
		}

		// Now show the categories
		for($n = 0 ; $n < $nrows ; $n++) {

			if( !isset( $row_list[$n] ) || !isset( $category_tmp[$row_list[$n]]["category_child_id"] ) )
			continue;
			if( $category_id == $category_tmp[$row_list[$n]]["category_child_id"] )
			$style = $highlighted_style;
			else
			$style = "";

			$allowed = false;
			if( $depth_list[$n] > 0 ) {
				// Subcategory!
				if( isset( $root ) && in_array( $category_tmp[$row_list[$n]]["category_child_id"], $allowed_subcategories )
				|| $category_tmp[$row_list[$n]]["category_parent_id"] == $category_id
				|| $category_tmp[$row_list[$n]]["category_parent_id"] == @$categories[$category_id]["category_parent_id"]) {
					$allowed = true;

				}
			}
			else
			$allowed = true;
			$append = "";
			if( $allowed ) {
				if( $style == $highlighted_style ) {
					$append = 'id="active_menu"';
				}
				if( $depth_list[$n] > 0 ) {
					$css_class = "sublevel";
				}
				else {
					$css_class = $links_css_class;
				}

				$catname = shopMakeHtmlSafe( $category_tmp[$row_list[$n]]["category_name"] );

				if ($_REQUEST['category_id'] == $category_tmp[$row_list[$n]]["category_child_id"]){
				$selected = ' selected="selected"';
				}
				else{
				$selected = '';
				}
				$Itemid = (int) vmRequest::getInt( 'Itemid', '' );
				$html .= '
				<option value="'.$sess->url(URL."index.php?page=shop.browse&category_id=".
				$category_tmp[$row_list[$n]]["category_child_id"].'&option=com_virtuemart&Itemid='.$Itemid).'" label="'.$catname.'" id="'.
				$category_tmp[$row_list[$n]]["category_child_id"].'"'. $selected. '>'
				. str_repeat("   ",$depth_list[$n]) . $catname
				. ps_product_category::products_in_category( $category_tmp[$row_list[$n]]["category_child_id"] )
				. '</option>';
			}
		}

		return $html;
	}
?>
<script type="text/javascript">
<!--
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
  var selObj = null;  with (document) { 
  if (getElementById) selObj = getElementById(objId);
  if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0; }
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<form id="vmcatselectform" name="vmcatselectform" action="">
  <select name="vmcatselect" id="vmcatselect" onchange="MM_jumpMenu('parent',this,0)">
   <?php
echo get_category_tree_select( $category_id, $class_mainlevel );
?>
  </select>
  <input type="button" name="go_button" id="go_button" value="Go" onclick="MM_jumpMenuGo('vmcatselect','parent',0)" />
</form>
 <?php
 //end
 ?>

20 April 2011 Phoca Download CommunityBuilder - new 1.6 plugin

category:
Joomla Developers

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.

Download it here

Enjoy! 

22 March 2011 Internet Explorer 9 and Firefox 4, Finally!

category:
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

category:
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.

Nice Features:

• 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

category:
News

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. 

Read more about our design of the Brooklyn Music School site »

Full story: http://cityroom.blogs.nytimes.com/2011/02/11/double-duty-88th-precinct-and-88-keys/

13 February 2011 Formula for scaling objects

category:
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

category:
Web Design and Development

With CSS3 it is now possible to rotate divs, images, iframes, and more. Here's a basic example:

CSS:

<style type="text/css">
#rotatexample{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color: #FFF;
	background-color: #C30;
	height: 150px;
	width: 150px;
	padding:10px;
	text-align:center;
	display:block;
	margin-left:30px;
        margin-top:30px;
	radius: 8px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	vertical-align:middle;
	border: 2px solid #C30;
	-moz-box-shadow: 0px 0px 4px #000; /* FF3.5+ */
        -webkit-box-shadow: 0px 0px 4px #000; /* Saf3.0+, Chrome */
        box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE9 */
}
#rotatexample{
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	transform: rotate(10deg);
/*	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.3);*/
	-ms-transform: rotate(10deg);
	cursor:pointer;
	border: 2px solid #333;
}
#rotatexample p{
	text-align:center;
	height:130px;
	display:block;
}
</style>

HTML:

<div id="rotatexample"><p>Hover over this CSS <div> to rotate it!
 Works in Firefox, Chrome, and Internet Explorer </p> </div> 

02 February 2011 E-mail Distribution List with Joomla

category:
Website Owners

Recently we needed to set up a simple e-mail distribution list for a client, so that when anyone sends an email to "listname@site.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.