Search

Posts By Date

« June 2017 »

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  

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<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>
</head>

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

<!-- TemplateBeginIf cond="_document['Property List']" -->
<table>
<tr>
<th>Bedrooms</th>
<th>Bathrooms</th>
<th>Listing Price</th>
<th>Status</th>
</tr>
<!-- TemplateBeginRepeat name="Properties" -->
<tr>
<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>
</tr>
<!-- TemplateEndRepeat -->
</table>
<!-- TemplateEndIf -->


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

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.

A Minnie Site for Disney

One of the things I intended to use my site for was to promote my services as a for-hire Internet professional specializing in Web development, Web design, search engine optimization, standards-compliance, usability analysis, Internet marketing and promotions, Web site analytics, Internet advertising, etc. Phew! Besides sharing a few lines of code, I haven't done very much "me" marketing, so here's my start.

I just wrapped up a small project for the Walt Disney World® convention and meeting attendee division. I was commissioned to develop a micro site promoting Disney's special theme-park ticket prices for conventionears. Conventionears...get it? In any case, the Disney Conventionear Ticket site was promoted to production last week and is now live.

My primary challenges in developing the site were to ensure search engine optimization and handheld device compatibility (particularly the Blackberry and iPhone) while meeting Disney's strict creative quality standards. With my requirements identified, and my standards-compliant XHTML shell approved to go into the design phase, I was provided access to Disney's plentiful resource libraries for inspiration (I wish all my clients had such well-organized, asset libraries). I ended up compositing 4 unique page themes for each of the Disney theme parks, each sharing an evening backdrop since the tickets are valid after 4 p.m. Once the design comps were approved, I incorporated them into the XHTML pages using CSS to ensure the SEO would not be influenced by any non-indexable elements. If you visit the site, refresh the pages a few times and you'll see the themes randomly change among each of the Disney theme parks.

If you're interested in reading about my experiences in targeting a Web site for the BlackBerry, stay tuned for my next entry.

The Modern-Day Apollo Program

Apollo, the eagerly anticipated cross-operating system runtime from Adobe, is now available for download in the Adobe Labs. The Apollo SDK allows Web developers (me) to build and deploy rich Internet applications to the user desktop (you) via a runtime (think Flash Player). Eventually you'll be able to run both Web and desktop applications such as Gmail, eBay and Photoshop through Apollo; further converging the gap between the two application formats. If you're not a Web developer and want to see what the Apollo hype is all about, you can kick the tires so-to-speak by downloading the runtime (let's call it the Apollo Player) and some of the sample applications (I recommend ScreenPlay to start with). If you thought us Web Developers were dangerous before, wait 'til we get at your desktop!

Say Cheese

I've updated the photos section with a new, dynamic, HTML-based photo library. Up until now, I was using SlideShowPro, but decided I wanted to move away from its flash-based presentation. Don't get me wrong, SlideshowPro is a tremendous product that will meet the needs of 99.9% of the users looking to maintain a photo library, but I wanted to develop my own photo application to better integrate with the site. I guess being bored after spending the day home, sick, with strep throat will make you do crazy things.

Exploring Internet Explorer 7

I thought I would never go back to using Internet Explorer after having found Firefox, but IE7 Beta 2 is making me think otherwise.

Besides the obligatory facelift, the new IE features tabbed navigation, the big seller that put Firefox on the map (sorry Opera, you just didn't catch on). But, what really surprised me about IE was how well the RSS was organized and laid out. Microsoft had indicated RSS integration would have an important role in the next version of their browser and they weren't kidding. A typical feed is highly legible, visually appealing and features a feed-specific menu that allows you to search, filter and sort through content. There's no clumsy XML hierarchy to fumble through here.

The one major drawback of IE7 is the lack of extensions. There are far too many useful tools in the Firefox extensions library to go ignored. As a Web professional, I use Firefox's Web Developer Toolbar religiously and the IE counterpart just doesn't match up. If IE is to regain the market share it lost, it will have to find a solution to match Firefox's extensions.

Finally, I noticed a few minor differences in the way IE 7 renders CSS, but nothing too major just yet. I'll need to take a better look around to see just how much has changed, but at first glance I don't see much.

Be an Engineer, Not a Reverse Engineer

Instead of developing my own blogging application from scratch, I figured I'd grab a freeware version from Web world and make some modifications to it. I'm pretty happy with what I've been able to accomplish with BlogCFC, but I've recently run into some issues trying to make things run a little differently then they were intended to work. This is no knock on BlogCFC because it is a great application; it's just a reality check that cutting corners doesn't always save you as much time as you anticipated.