Stormware Studios

LennonPhotography.net Online

admin — Fri, 05 Mar 2010 04:15:59 +0000

Please welcome the launch of our newest design, found at lennonphotography.net. Whether you are a seasoned shutter-bug, or simply enjoy observing the art of capturing still life, please visit the site to appreciate the handiwork found therein.

How To Add An Image Rotator In Magento

admin — Thu, 18 Feb 2010 15:07:03 +0000

On one of our recent projects, the client requested an image-rotator to display catalog images on their Magento eCommerce site. Since we wanted a simple-to-update solution, after some diligent searching, we came across a fairly obvious one. This article will discuss how to add an image rotator to a Magento eCommerce store.

Required Files and Tools

1. A working installation of Magento. This is beyond the scope of this article, but once you have it up and running, all the work we will be doing will be under CMS | Manage Pages from the Admin Panel.

2. The Free XML Banner Rotator from Flabell. You will need to register an account on the site, which is strongly encouraged, as Flabell is an excellent source for free and commercial Flash utilities.

3. A combination of text editor and FTP client. Respectively, Notepad++ and FileZilla make a good team for this, since you can navigate to a remote folder, right-click on the file you wish to edit, select “View/Edit”, and have the file open in Notepad++; saving and returning to FileZilla automatically causes FZ to prompt you to upload the changes to the site. To configure your preferred editor, in Notepad++ navigate to Edit | Settings | File Editing, and configure the “Use custom editor” option.

Required Steps

1. Unzip the contents of the Free XML Banner Rotator, and from XML Banner Rotator_update02\project\deploy, upload preview.swf, banner/, and js/, to your Magento site’s root folder. Open the index.html file, and copy the contents of this file between the and (but not including those) tags.

2. Back in the Magento CMS static page editor, edit the Home page, then paste the HTML copied from #1 into the Content text area found under the General Information tab. Save your work.

3. Now that the Home page of the CMS is set up, if you visit your site URL, you should see the stock images and text begin to load.

4. Using your FTP client, navigate to ftp://your-site/xml/, and edit banner.xml to the desired effect. Refer to Flabell’s documentation under the Help section for this topic.

5. Finally, upload your desired images, via FTP, to ftp://your-site/banner/content/images/.

6. Visit your site once more, and you should begin to see your images rotate.

Happy web-mastering!

Embed Fonts Using CSS

admin — Thu, 11 Feb 2010 03:06:37 +0000

Embedding fonts; the holy grail of web designers.

Microsoft, since 1997, has enabled web designers to embed fonts in websites, with some caveats. First, the utility they provide to convert .ttf files to .eot, is dated to function in Windows 98. Fast forward 13 years, I have been unable to get this tool to not crash in Windows 7. Second, this utility seems to want to connect to an IIS server (which is useful for about one-quarter of websites).

For Firefox, Safari, Chrome, and Opera, .eot files are not required, and web developers may instead utilize the standard .ttf file format … except CSS rules involving .ttf files don’t work in Internet Explorer!

Fortunately, with some craftiness, it is possible to solve both these problems, as explained below.

First, we will need to gather some tools:

A font, in .ttf format, of your choice (head over to dafont.com; this site has plenty of free, even for commercial use, .ttf files). For purposes of this article, we will assume the font of your choice is called myfont.ttf.
A utility to convert the .ttf file (usable by browsers other than IE) to a .eot file (which IE can use).
Some simple CSS knowledge.

1. Once you’ve got myfont.ttf, you will need to convert it to myfont.eot file, using a handy utility called, appropriately enough, ttf2eot.

(This process is outside of the scope of this article, however the developers of ttf2eot have provided documentation on their website.)

2. Place myfont.ttf and myfont.eot in your web root.

3. We will need 3 .css stylesheets and one .html markup document, so create these in your web root. The first stylesheet we will simple call ’style.css’. The second will be called font.css, and the third will slightly deviate from this; call it ‘font-ie.css’. Finally, call the markup document, index.html.

4. Open up font.css in your favorite web document editor, and paste the following code:

@font-face
{
font-family: "myFont";
src: url("myfont.ttf");
}

5. Open up font-ie.css, and paste the following code:

@font-face
{
font-family: "myFont";
src: url("myfont.eot");
}

6. In style.css, paste the following code:

body
{
font-family: "myFont";
}

7. Finally, in index.html, paste the following code:

Hello, world!

Save each file, and preview your website in a few different browsers. In each case, you’ll see “Hello, World!” rendered in all the splendor of your chosen font!

In conclusion, what exactly did we do? First, we separated each font styling (e.g. .ttf vs. .eot) into its own stylesheet. Second, we defined a third stylesheet which brings the two disparate font types together. And finally, we defined in the markup document, to (1) specify a custom font style (e.g. ‘myFont’), (2) if the browser is Internet Explorer, overwrite ‘myFont’ with styles specific to Internet Explorer, and (3) load the stylesheet for the rest of the site.

I’ve uploaded the code for the above example, you can download it here.

Happy web-mastering!

Introduction to HTML Canvas

peter.kingsbury — Mon, 21 Dec 2009 20:16:31 +0000

New technology typically is met with mixed emotions and conflicting, often polar, opinions. This is definitely in the realm of HTML version 5’s new Canvas element, which threatens to open a wide variety of Pandora boxen for all to enjoy.

What is HTML Canvas?

Canvas is a standard feature of the latest iteration of HTML (now in version 5), originally developed by Apple for Safari, and eventually implemented in Chrome by Google, Firefox by Mozilla, and Opera by Opera Software.

Its namesake closely matches its intent: provide JavaScript developers with access to a canvas upon which to paint lines and shapes, blit bitmaps (translucency supported), print fonts, and render 3D objects.

Consider vastly different web-applications of (1) business software which draws charts and graphs in a real-time dashboard, (2) a blog site with subtly-animating background effects overlaid by HTML/CSS, or (3) a 2D- or 3D-graphics system which enables visitors to play online games.

In the case of the business software, one would typically purchase and use one of the many web-based spreadsheets packages available. For the blog site, perhaps a rich-media Flash+AJAX+PHP or Silverlight+AJAX+ASP.NET application would be the solution. And in the final case of a web-based game, the answer has typically been Flash, Silverlight, Java, or a technology-specific plugin like Unity3D.

But in each case, Canvas has the ability to take the reins and deliver rich content, regardless of whether it does spreadsheets and charts, blogs, or games.

Why is Canvas important?

The above three examples possess common traits:

Traditionally, they involve expensive licensing fees for authoring software.
Also traditionally, they tie both end-user and designer/developer to a particular authoring product, plugin, or method of delivery.
End-users must be tech-savvy enough (and have enough OS-level permissions) to manage plugin installation themselves.

With absolutely zero installation required, its accessibility instantly surpasses that of Flash or Silverlight, which both require end-users to install and maintain updates for compatibility reasons. Since Canvas is a standard feature with generalized implementation instead of a browser add-on married to a particular authoring package, there comes into play a shift in focus from single-product-specific professionals to implementation-specific ones.

Who are the competition?

Like any new technology, Canvas is bound to go through growing pains. While it has a strong potential for penetration due to its install-less nature, it has some serious statistics to overcome. The current market-giant is Adobe’s Flash (formerly Macromedia Flash), with a staggering 99% worldwide browser penetration. Microsoft’s Silverlight has an admirable market penetration, weighing in at just under half of internet-connected computers. And Java, whose presence predates either competitor, maintains a steady presence on three-quarters of desktops.

What obstacles yet exist?

Microsoft Internet Explorer (in version 8 at the time of this writing, and still the default browser on many computers) doesn’t support Canvas (hence the advent of work-arounds), and I will be surprised if it ever does. Microsoft has more interest invested in cultivating Silverlight than it does in euthanizing it, so don’t count upon Canvas adoption anytime soon.

Because Canvas is young (and equally because of Flash’s venerability and Silverlight’s market penetration), designers and developers alike will have a difficult time dropping their preferred RIA authoring programs.

Since there are currently no public-ready front-end authoring solutions, which makes both Adobe Flash CS4 and Microsoft Expression Studio that much more attractive. Count on one of Canvas’ proponents — Mozilla with their upcoming Thunderhead — to develop a front-end authoring application suitable enough for designers and developers alike to jump-ship on Adobe or Microsoft. But Canvas is still new, and Thunderhead has a long way to go in terms of competing with Flash (now in its 13th year) in terms of usability.

What’s next?

Spread the word. If anything, competition is good for innovation, which only benefits end-users and customers. Keep a close eye on the evolution of Canvas. Talk about it!

And stay tuned for the second part of this series on using Canvas to achieve unusual results…

Links

For any technical information regarding HTML 5 Canvas, please view one of the following:

http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element (careful; long loading time!)

http://en.wikipedia.org/wiki/Canvas_%28HTML_element%29

Adobe Version Cue CS4

peter.kingsbury — Tue, 24 Nov 2009 19:07:27 +0000

What is Adobe Version Cue?

Quite simply, Adobe Version Cue (along with its partner-in-crime, Adobe Drive) is a different method of managing your CS-created files. Version Cue enables the Project Manager, Graphic Designer, Web Developer, and Web Designer to coexist in the same project workspace.

One of the challenges of working with others (and indeed, even when flying solo) is the difficulty of managing projects, and files within projects. How many different versions of folders, PSDs, CSSs, etc, from the same project do you have stored on your desktop or laptop? I’m willing to bet your answer is somewhere north of “just one”!

Old School Methodology

Typically, when working on a project, one might create one root folder in which to store all project files, perhaps create multiple folders to organize files by file-type, and old versions of files either zip-compressed or renamed with some arbitrary prefix or suffix (think homepage_version1_2009-11-24.psd and so on). But what happens when you work between home and the office, or between a work computer and a laptop, or between the hard drive on your only PC/laptop and a portable USB drive? It’s quite possible that many users have encountered publishing old versions of images, out-of-date CSS rulesets, or stale HTML templates. Add the possibility of collaboration with a second (or more) professional, and suddenly one’s personal file “organization” becomes exponentially chaotic. Lose your portable USB drive, and your day goes from “great” to “I should have stayed in bed”.

Version Cue attempts to eliminate the version shuffle, as well as introduce the idea of organized collaboration, with the arrival of its Version Cue+Drive combination of software.

Adobe Version Cue - Service Panel

Adobe Version Cue

The first, and most important, piece of software is Version Cue. This is not an application one should typically use locally on their desktop or laptop; instead, it is intended to be installed on a network file server which acts as a repository for all media files edited by a team of collaborators.

Version Cue is installed and configured by a System Administrator, (typically someone who has little-to-no business using other Adobe applications!), and is configured with one user account per collaborator (whether Designer or Developer), and each user account is given one of two levels of permission (either standard user or system administrator). More often than not, users would receive standard user permissions (for security reasons, as well as to avoid ‘accidents’ if system administrators are unsure of what they are doing).

Additionally, one project is created per collaborative effort, and user accounts have the ability to create, edit, delete, check-in, and check-out files stored inside the project.

But how does a collaborator actually utilize these projects? Enter Adobe Drive…

Adobe Drive CS4 - Client Application

Adobe Drive

Collaborators of projects must first connect to a Version Cue network file server using Adobe Drive. Once connected, Adobe Drive creates a network drive entry inside your system’s file manager (for Windows users, this equates to a network drive inside Windows Explorer. For Mac, look for a network drive mounted on your desktop).

Once this network drive is visible, it can be manipulated almost exactly the same way other files on the computer can be manipulated. Almost…

Check In and Check Out

With the advent of Version Cue comes the introduction of a small measure of discipline. The basic premise of this discipline is: “if you want access to a file, perform a Check Out on it. When you’re done, perform a Check In”. The idea is the same as renting movies from a video store: if someone has rented-out the only copy of Breakfast At Tiffany’s, no one else may rent-out this movie until the original copy is returned to the video store. (Unless, of course, one tracks down the initial customer, and strikes a deal to watch the movie with them…)

Adobe Version Cue - Service Panel

Check Out effectively makes a given file unavailable for other users. Check In does the opposite, and returns a Checked-Out file back to an available state.

Working from home, or from Starbucks

One of the nice things about this sort of software is that, even though your files might be stored away neatly on a network file server at the office (for example), this doesn’t limit you to only working at the office. When configured correctly, a company’s network may be set up such that Version Cue collaborators can connect from anywhere there is an internet connection: at home, at Starbucks, in the library, and so on. The responsibility of configuring this situation lies, again, with the System Administrator. (And for the SysAdmins out there, for CS4: TCP ports 3703 and 5353, SSL requires 3704, and for CS3: TCP port 51000, SSL requires 51001. See Adobe’s documentation to this regard.)

Integration with other CS4 Applications

Another well-thought-out feature of Adobe Version Cue and Adobe Drive, is that of its integration with other CS4 applications. For example, when working in Photoshop CS4 on a file stored in a Version Cue folder, one has the ability to Check In a file being edited (i.e. committing local file changes to the network file server); Photoshop prompts for additional notes on the file to be entered. These changes may be viewed in your system’s file explorer by right- or alternate-clicking on the file, choosing Adobe Drive CS4, and clicking “Show Versions…”; a window will appear displaying all available versions.

Pros and Cons

Pros:

Very simple to install and configure. Users with little-to-no experience with administering projects, user accounts, and files, can jump in fairly easily without difficulty.

Cons:

Since files are stored on a network file server, access to them may be perceived as slow at times. This is a typical issue with files on a network, but since Version Cue files have some extra features not found in simpler network configurations (specifically, the addition of versioning, check-in/out, and so on), this added layer of functionality unfortunately costs users access-time.
Backup and restore, while extremely useful, may be cumbersome and time-consuming to perform for System Administrators who are unfamiliar with the technology employed by Adobe.
Accessing files which are stored remotely, during times when an internet connection may be down or a network file server may be down for maintenance (or, goodness forfend, hardware failure), means zero productivity. This is part-and-parcel for any networked file server situation, and whose down-sides are drastically outweighed by its up-sides.

Conclusion

The days of organized collaboration in a single user-space is very likely coming to an end in the near future. With many large corporations moving applications and interactivity to the collective fondly referred to as The Cloud, users will find many old methods of computing returning back to a set of features originally found at the genesis of thin-client/application-server computing as far back as halfway through the last century.

Fortunately, the apps are cooler nowadays.

Entrepreneur Week a Success

admin — Fri, 20 Nov 2009 17:09:42 +0000

Our sincerest thanks go out to the hosts, sponsors, and guests at the annual Communitech event in Waterloo, which focused on entrepreneurs, business development, and architecting networks of professionals from many different fields. Throughout the week, we maintained a presence at the event, enjoying fascinating perspectives delivered by pioneers at the forefront of their respective industries.

For more information on what transpired at the event, visit the Entrepreneur Week website.

Green Fuel Tabs Canada Launched

ian.bailey — Wed, 18 Nov 2009 21:16:00 +0000

Stormware Studios is proud to announce its involvement with the launch of greenfueltabs.ca and bringing their product to a Canadian market.

Site Launched

admin — Wed, 28 Oct 2009 14:53:17 +0000

Today we launched a new site to welcome intuitive design, layout and ease-of-use. Areas have been added for users to make initial contact, either via a quick contact form, or a more complete ‘request a quote’ form.

Of particular importance is the addition of news and articles. We will be keeping users abreast of goings-on with the company, as well as periodically posting articles relating to web technology and design.