Posts By Date

« May 2019 »

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

XBox 360 Gamercard

RichAlot's Gamercard

Creating Advanced Dreamweaver Templates

I've spent a good portion of the last month creating Dreamweaver templates that are compatible with Adobe Contribute. Dreamweaver and Contribute are an inexpensive way to integrate content management into a site and, if done correctly, can function as well as any of the enterprise-level CMS solutions out there. I highly recommend the duo for small-to-medium-sized sites, especially if your company doesn't have the budget for a high-dollar CMS. I particularly like how the Dreamweaver templates preserve standards-compliant code when locked down, as well as how the templates seamlessly translate in the Contribute user interface.

In researching best practices for building Dreamweaver templates, I wasn't able to find very many advanced resources. As a result, I've put together some sample code for a template that gives you a few tips, which may prove to be useful in your Dreamweaver template creation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- TemplateParam name="City" type="text" value="CityName" -->
<!-- TemplateParam name="Property List" type="boolean" value="true" -->

<title><!-- TemplateExpr expr="City" -->, Florida Real Estate Listings</title>

<h1><!-- TemplateExpr expr="City" --><!-- TemplateBeginEditable name="description" -->, Florida Real Estate Property Listings<!-- TemplateEndEditable --></h1>

<!-- TemplateBeginIf cond="_document['Property List']" -->
<th>Listing Price</th>
<!-- TemplateBeginRepeat name="Properties" -->
<th><!-- TemplateBeginEditable name="Bed" -->#<!-- TemplateEndEditable --></th>
<th><!-- TemplateBeginEditable name="Bath" -->#<!-- TemplateEndEditable --></th>
<th><!-- TemplateBeginEditable name="Listing" -->$#<!-- TemplateEndEditable --></th>
<th><!-- TemplateBeginEditable name="Status" -->Available<!-- TemplateEndEditable --></th>
<!-- TemplateEndRepeat -->
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="_document['Property List']==false" -->
<p>There are currently no properties available in <!-- TemplateExpr expr="city" -->, FL.</p>
<!-- TemplateEndIf -->

So what does all the code mean? I'm going to assume you're familiar with the basics of editable, optional and repeating regions. If not, I highly recommend referring to the Help menu in Dreamweaver or Adobe's Dreamweaver Help Resource Center. What I want to draw your attention to is the TemplateParam.

The TemplateParam is a Dreamweaver template object that allows you to define a parameter in your template. By default every template object has a name, but not all objects have values. By defining the name, type (Boolean, number, color, URL or text) and value in a TemplateParam, you store its information for future use throughout the template. In the example above TemplateParam is used in two unique instances.

In the first instance, the TemplateParam named City is a text type parameter with a placeholder value of CityName. I have created this parameter because it allows the reuse of the value--which will be a city name--for each instance it appears in the document. I need only define the value once. For every other instance where I want the value of City to appear in the template, I can use the expression <-- TemplateExpr expr="City" -->. Now when a user logs into Contribute, they are given the option to define the value for the City TemplateParam. Let's say for example the Contribute user defines the City value as Orlando. Every instance where I have entered the expression in the template is now replaced with the text value Orlando. This not only saves the end-user from having to reenter the text numerous times, but it helps prevent against user error because it doesn't require the template regions where the expressions appear to be exposed for editing.

The second TemplateParm instance in the example above is a Boolean type. A Boolean parameter allows you to assign true and false values in your template. If you're creative, you can utilize this to create a bit of crude conditional logic and swap content based on the Boolean value. In the example above, there is a table that should appear if there are property listings on a given page. However, if there are no property listings on that page the table should be replaced with a text message. See the example below for a more concise understanding of how it works.

<!-- TemplateParam name="Property List" type="boolean" value="true" -->
<p>If Property list is true show this.</p>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="_document['Property List']==false" -->
<p>If Property list is false show this.</p>
<!-- TemplateEndIf -->

As you can see, the key to the swappable content is the evaluation of the TemplateParam named Property List. If the value of Property List is true, a certain set of content is displayed. Conversely, if the value is false a different set of content is displayed. Like with the City TemplateParam, the value for the Property List Param can be assigned by the end user when they log into Contribute. The template then adjusts itself accordingly.

In addition to the text and Boolean parameter types, there are also color, number and URL types, but I won't get into those at this time. Although Dreamweaver templates tend to be an underappreciated tool, they can be highly-efficient when combined with Contribute and the pair can do the work of a high-cost CMS for a fraction of the cost.

Optimizing A Web Site For BlackBerry Devices

If you thought targeting Web sites to work with several different browsers was difficult enough, try throwing BlackBerry support in the mix. Designing a Web site to work with BlackBerry handheld devices can be frustrating because the BlackBerry Web browser has fewer capabilities than a standard Web browser. This lack of features greatly affects design strategy because slower download speeds and limited screen size must now be factored in.

The first thing you should do when optimizing a site to support BlackBerry devices is download and install the official BlackBerry Device Simulator and BlackBerry Email and MDS Services Simulator Package. The device simulator and simulator package emulate the functionality of actual BlackBerry products and allow you to access and test a Web site in a virtual environment.

When you first open a site in emulation, you'll probably notice the BlackBerry's CSS support is limited and your site may not look so great. Since most front-end developers are trained to be reactive, your initial solution maybe to attach another stylesheet, target the handheld medium and adjust the classes and ids in that stylesheet accordingly. Unfortunately, the BlackBerry disregards both screen and handheld media style declarations. In fact, many of the useful style declarations that could create a loophole for the lack of media support—including display:none and visiblility:hidden—won't work on a BlackBerry. For a complete list of supported CSS declarations, refer to the BlackBerry Content Developer Guide.

So what's the solution? The real trick to optimizing a Web site for BlackBerry devices (without any hacks or work-arounds) is using well-formed XHTML in conjunction with CSS and omitting unnecessary layout elements using the screen medium. This focus on semantically correct XHTML to drive your layout may not look pretty on the BlackBerry, but it's advantageous for several reasons. For starters, since you're dealing with a limited amount of screen space and relying on what equates to dial-up connection speeds you want to keep the majority of your display content for the BlackBerry as text-based. Secondly, the well-formed code will result in better overall search engine optimization because you're using code standards that are friendlier to the search engine indexing process. Finally, the focus on semantics will make the site scalable and rid you of any worries associated with the consequences of adding text, modifying links or changing the appearance of an element in your stylesheet.

With full-featured browsers integrated into the latest generation of handhelds (Safari on the iPhone, IE in Windows Mobile devices) aesthetics support on mobile devices is vastly improving. Either way, good coding standards promote graceful degradation and a provide a certain level of future proofing that ensures users can view a Web site no matter how outdated or cutting-edge their device is.