On the source computer:

svnadmin dump /path/to/repository > repository-name.dump
tar zcf repository-name.tgz repository-name.dump
scp repository-name.tgz hostname:/path/to/new/repository

On the destination computer:

cd /path/to/new/repository
svnadmin create repository-name
tar zxf repository-name.tgz
svnadmin load repository-name < repository-name.dump

Once complete, disable the old repository before testing, to ensure all linkage to the new repository is updated.

One of the immediate benefits of setting up such a system is that most development can be done remotely: MS SQL Server Management Studio, Visual Studio’s Web development suite, as well as file shares, remote desktop, etc, make for a great way to remotely develop in ‘pristine’ conditions.

But there are drawbacks, too, such as needing to deal with firewall issues, not being able to penetrate past a router or the requirement of setting up a VPN.

One of the problems I encountered when trying to remote into the MS SQL Server 2008 that I’d set up was the following error:

Named Pipes Provider, error: 40 – Could not open a connection to SQL Server

I followed the below steps, and was able to connect to the server after just a few moments of tinkering:

1. From the server in question, surf to this Microsoft article, and download and install the Firewall rules modification program. Never drop your firewall, even on a development machine, unless you have a really good reason to.

2. Launch SQL Server Configuration Manager. Navigate to SQL Server Network Configuration, then Protocols for your server name. Enable TCP/IP and Named Pipes by right-clicking and choosing Enable for each given Protocol Name.

3. Restart the SQL Server service from Services (or from command line, subsequently run “net stop mssqlserver” then “net start mssqlserver”.

4. Try your remote connection once more, and you should be able to connect.

It’s not a terribly difficult concept, but one of the more challenging tasks developers face is dealing with environment setup. And while there is a certain blurred-line overlap between software development and server administration, sometimes the latter is daunting, especially given that you might set up only a handful of servers during your career.

One of our more recent clients made a request to display PDF thumbnails published through the Joomla CMS that we’d deployed for them.

The requirement was fairly simple, but the execution was a little more involved. After installing ImageMagick, ImageMagick PHP bindings (which incidentally aren’t working, and a workaround was devised), and sleuthing some code, the following solution was determined:

<?php
function thumbPdf($pdf, $width)
{
	try
	{
		$tmp = 'tmp';
		$format = "png";
		$source = $pdf.'[0]';
		$dest = "$tmp/$pdf.$format";

		if (!file_exists($dest))
		{
			$exec = "convert -scale $width $source $dest";
			exec($exec);
		}

		$im = new Imagick($dest);
		header("Content-Type:".$im->getFormat());
		echo $im;
	}
	catch(Exception $e)
	{
		echo $e->getMessage();
	}
}

$file = $_GET['pdf'];
$size = $_GET['size'];
if ($file && $size)
{
	thumbPdf($file, $size);
}
?>

The above code assumes that you’ve provided appropriate permissions to the temporary directory (usually chmod 755 or chmod 777, depending on your level of courage), that you’ve saved the above code snippet in a file called thumbPdf.php, and placed this somewhere visible on your web server.

After obtaining parameters from GET, the code checks the destination temporary directory, and if the desired image is not present, it uses ImageMagick’s convert program to generate the PDF thumbnail, sized down to the appropriate proportion, and saves the image in the temporary directory. Finally, it reloads the thumbnail into an ImageMagick PHP object, and outputs the content to the browser.

Invoking the above code is done fairly easily; simply call the PHP script from inside an image tag, like so:

<img src="/path/to/thumbPdf.php?pdf=your.pdf&size=200" />

The above code would generate a thumbnail from the first page of “your.pdf”, sized 200 pixels wide by an appropriately-proportioned height.

Good luck, and happy webmastering!

The full HTML5 specification is documented on WHATWG’s website, and may be found here.

Audio

Audio introduces an extremely simple method by which audio file content may be delivered to a web audience. In a nutshell:

<audio src="http://address.to/some-sound-file.ogg" controls="controls" autoplay="autoplay" preload="preload"></audio>

With this, the web audience is provided with simple player controls, giving them familiar controls like pause, play, set track position, and so on. The major limitations are technical in nature; the web audience’s browser must support the provided file format (Ogg Vorbis, WAV PCM, or MP3, depending on how you roll).

Video

Video, similar to Audio, opens the floodgates for a host of new possibilities with regard to video authoring. Adobe’s Flash player is no longer required for displaying .flv content, and instead, we author video using one of the supported formats (WebM, H.264, VP8, or Ogg Theora), and expose the content using a DOM tag.

<video controls>
  <source src="http://address.to/some-video-file.ogg" type="video/ogg; codecs=dirac, speex">
</video>

In this example, video is provided with player controls, the type of video is specified, and we tell the browser what CODECs to load.

Canvas

Quite possibly the most exciting feature in the HTML5 specification, Canvas enables the web developer to render objects using 2D and 3D contexts.

Simply enough, we include a <canvas> object in the DOM:

<canvas id="some-canvas-id" width="320" height="240"></canvas>

The next step is to expose a 2D or 3D context of the <canvas> object:

var canvas = document.getElementById("some-canvas-id");
var ctx2d = canvas.getContext('2d');
//or, we could get a 3D context, if the option is supported
var ctx3d = canvas.getContext('3d');

Finally, we can perform any number of operations with the 2D or 3D context:

// Fill in a blue rectangle
ctx2d.fillStyle = "rgb(64, 128, 255)";
ctx2d.fillRect(5, 5, 25, 75);

// Draw a rectangle
ctx2d.fillRect(25,25,100,100); // draw a filled rectangle
ctx2d.clearRect(45,45,60,60); // clears the spec ified rectangular area
ctx2d.strokeRect(50,50,50,50); // draws an outlined (non-filled) rectangle

// Load image data
var img = new Image();   // Allocate an Image object

img.onload = function(){
    // perform this function once the image data is loaded
    // Draw a 100x100 rectangle at position 40,50 on the context, using data from our allocated image, starting at 0, 0 on the source image.
    var sourceX = 0;
    var sourceY = 0;
    var sourceWidth = 100;
    var sourceHeight = 100;
    var destX = 40;
    var destY = 50;
    var destWidth = 100;
    var destHeight = 100;

    ctx2d.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
}

// Set the URI source of the Image, which loads the content into the Image object
img.src = 'some-image.png';

There are many other options for 2D rendering, such as drawing lines and curves, and filling shapes with RGBA colors. Coupled with the 3D rendering options, the web as a whole will become a much more visually impacting place in the years to come.

Database

The Database component enables the developer to generate and interact with locally-managed databases and tables using SQL syntax to store and retrieve data. If you’ve used a RDBMS system in the last century, you will be quite familiar and comfortable with its usage.

var dbname = "database name";
var dbversion = "1.0";
var sql = "SELECT * FROM SomeTable";
var database = openDatabase(dbname, dbversion);
database.executeSql(sql,
    function(result)
    {
        // Perform results testing
    });

Potential usefulness includes enabling developers to extend “flat-file” cookie functionality to databases, giving faster and more robust access to data that must be stored on the client-side.

Websocket

The WebSocket interface seems very promising, and web applications that utilize it will far surpass their AJAX brethren in form and function.

A socket connection is a term used to describe a network connection between a client (i.e. you) and a server (i.e. google.com). Your web browser makes these connections constantly, over TCP, for each send (e.g. clicking Submit on a form) and receive (e.g. loading a web page) operation it performs.

WebSockets allow the web developer to leverage this sort of communication by exposing a “send/receive” interface via JavaScript. Invocation of the WebSocket interface is done as follows:

// TCP connection on port 1234
var ws = new WebSocket("ws://websocket.server.com:1234");

ws.send(); // Send the plain-text string to the server

ws.onmessage = function(msg){

    // This function is triggered when TCP data is sent to the web browser
    var data = msg.data; // The actual data sent from the server

}

All of this means a real-time data connection between the web-browser and a host, similar to what game-, chat-, and file-servers do already.

Cache

A major concern with remotely-hosted resources, whether web-applications, web sites, or other kinds of resources, lies in the disconnect. What happens to the cloud application when the cloud is not available?

Browser caching manifests are one of the developments that strive to provide a solution to this problem. By specifying to the DOM what files are necessary for the web audience to view a web page or utilize a web application, the web developer enables a browser to locally cache parts of content, and serve them up when an internet service is not present.

Caching is exposed via the DOM:

<!DOCTYPE HTML>
<html manifest="site.manifest">
    <head>
        <title>Cache Example</title>
        <script src="script.js" type="text/javascript"></script>
    </head>
    < body>
    </body>
</html>

A cache manifest (in the example above, the “site.manifest” file) is a script-file which tells the web-browser what files can be cached, and which ones should remain “over the wire”-only.

CACHE MANIFEST
# the above line must appear first in the document
# comments are prefixed with a hash symbol

# cache-enabled files can appear here, or under a CACHE: segment as below
index.html
images/some-file.png

# files under the NETWORK: segment will never be cached
NETWORK:
app.cgi

# files under CACHE: will similarly be cached in the browser
CACHE:
css/style.css

The Cache feature-set shows great promise for truly delivering web applications to the masses; by downloading application media once, and only downloading application modules (logic, authentication, etc), Cache enables the web developer to control how much or little is stored in the browser.

HTML5 promises to provide web developers with numerous means by which to narrow the gap between desktop- and online-applications. Expect to see further evolution in favor of cloud-based programs, online games, and web-based media in the coming months and years.

The HST will be applied on most supplies of goods and services made in Ontario at a rate of 13%, consisting of the 5% federal portion and an 8% provincial portion. (cra-arc.gc.ca)

Previously, web designers would not be required to charge clients (hence not remit) PST, as web design work falls under exemption stipulations. Exceptions exist, of course, when physical counterparts to web-work (e.g. DVDs provided to clients) or executable programs come into play, but as a general rule, “if it’s digital, no PST required”.

Web design in Ontario and BC has had a decent gig; no requirement to charge a total higher tax amount (PST+GST) means happier clients. But with the new taxes in play, web designers will be required to swallow a tougher pill, potentially billing their clients an additional 8%.

For more information, please visit the Canada Revenue Agency website.

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 <body> and </body> (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!

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:

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

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

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

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!

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

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.