Haiz Design Note Pad

Add a Hype File to Your WordPress Theme

Stuart — Fri, 04 May 2012 14:43:45 +0000

For anyone wanting to add an animated element to a website, you won’t go far wrong if you use Hype by Tumult. This new tool makes it easy for designers to create animated graphics without writing the code.

The days of Flash as the must-use tool for web designers are over. Web banners and animations don’t play on iDevices and as many people are moving in ever-growing numbers to mobile browsing, jQuery, HTML5 and CSS3 have stepped in to offer designers alternative solutions for creating engaging, animated content. However, writing some of the code means learning yet another language and for many front-end web designers this can get in the way of the creative play.

Hype has a very familiar timeline-based interface and a gentle learning curve. I’m not going to post a tutorial here as there are plenty of good resources over at the Tumult website. Instead, I want to tackle another issue – displaying Hype content in a WordPress theme ONLY when it is the home page.

Embedding a Hype File in a Standard WordPress Post or Page

To add a Hype file to a post or page in WordPress it goes like this:

Create your file.
Export as HTML5 > Folder.
Open the .html file that is generated and copy the lines that are clearly marked
Upload your folder to your domain. Choose the wp-content/uploads directory.
Open up your page or post in the WordPress editor and switch over to the HTML tab. (This is important!)
Paste in your lines of code from point 3 above. (You can add classes to the div if you wish.)
Edit the path so the src points to your /wp-content/uploads directory.

That’s it. An example of this can be seen above and there is an article over at Tumult that shows how to work around any issues caused by caching plugins.

Embedding a Hype File in a WordPress Theme

The article on the Tumult site (link above) also covers adding Hype documents to a theme. However, it specifically tells you to paste your code outside of any PHP tags. If you want your animation to show ONLY on a specific page, such as the home page, you can still add your file but you will need to use another couple of steps and some conditional code.

Create your file and export a folder , as before.
Open the .html file and strip it down a little, so you end up with something like this:
Save the file as a PHP file – animation.php for example, and upload the resources folder to your theme folder, so both both file and folder should be in your WordPress theme folder.
Still in your WP theme folder, open up page.php. (Remember, this file is the template for your default pages. The index.php is for the list of posts on a page.) You can include your animation.php page in your page file, and wrap it in a
if you want to add some extra styling. Put something like this, wherever you want to add the file to your template:

if (is_front_page()) {

echo ‘
’;
include_once( TEMPLATEPATH .’/animation.php’);
echo ‘
’;

}

?>

Here’s an example of a file (wrapped in a
) that shows only on the landing page: Living Large dev site.

If you want to target a page other than the home page, see this page on the WordPress codex for conditional page tags.

Using The New Gridify Feature in InDesign CS5

Stuart — Sun, 22 Apr 2012 17:13:18 +0000

Adobe InDesign CS5 introduced a few new tools, one of which makes creating multiple frames on the page an absolute breeze. In fact, creating them, with equal spacing and setting the spacing all happens in a single go.

The tool (or perhaps more accurately, the technique) used involves the Frame tool and the arrow keys on the keyboard. The left/right arrows sub-divide the frame into columns and the up/down keys create rows. Here is a quick InDesign tutorial video showing how quick the process is.

Once you have frames created, you can use another new feature, the Gap tool, to resize your frames whilst keeping the spaces between the frames as they were originally. Furthermore, if you check the Auto-fit box (another new feature), any placed images will automatically resize as you drag and resize the containing frames.

How to Show Content Only on The Home Page of WordPress Sites

Stuart — Tue, 03 Apr 2012 11:35:37 +0000

If you are using your WordPress installation as a CMS for a website, you may well not be using the blog posts list as your landing page. In this case, you may want to have a page that displays content, such as a
only when that page is the landing page.

The key to this trick is simple and therefore, the explanation is equally simple.

First of all, you need to understand that the home page in WordPress-terms, refers to the blog posts index page. The page that you have chosen as your front page (Settings > Reading) is the front page and not the home page.

The WordPress front page selection

Select the static page option then choose a front page from the drop menu. (This assumes that you have already created your static pages.) Depending on your page or content needs, open the page.php file and click where you need to add your unique content. Enter something like this:


 if ( is_front_page ( ) ) {
 echo ‘
’;
 echo “This is unique content that only appears here on the site front page”;
 echo ‘
’;
 }
 ?>

You can add ids and classes to your content as shown in the code above. For the blog posts index page, use is_home( ) instead.

Massage In Mind Website

Stuart — Wed, 21 Mar 2012 18:07:32 +0000

I recently built a website for Massage In Mind – a company offering Swedish Massage and Shiatsu Chair Massages in your workplace or in your own home.

Like many of the sites I am building these days, the Massage In Mind website was designed and built using WordPress as the CMS for the client, as many people find this a very simple and easy to learn system for site management. I like it for many reasons, mainly the flexibility and expandability through plugins, but also because it is easy to hand over to clients, allowing them to manage their own content.

I had already created a logo for the client which established the colour scheme for the new site and related business stationery. (If you are a new business starting up and need help with affordable design solutions, Haiz Design offers a range of services covering all aspects of online and print promotion. See the main site for more details.)

The Massage In Mind site incorporates a MailChimp newsletter sign-up, a calendar for showing the therapist’s availability, booking forms and handles payments via PayPal.

Massage In Mind website

Vtec Wide-Angle And Macro Lenses For iPhone 4S

Stuart — Sun, 04 Mar 2012 19:20:05 +0000

I have just purchased the new vtec wide angle and macro lens attachments for my iPhone 4S. Costing just £24.99 (I bought mine from Amazon) I was keen to extend the capabilities of my already very good iPhone camera. Here is my mini review.

vtec macro and wide angle lenses for iPhone 4 /4S

Background

I am at best, an amateur photographer with no pro-kit and no technical knowledge about photography, I just like macro shots and know what looks good to me. The thought of getting even more out of my camera was appealing, and at less than £25 this pack is a steal, but it does come at a price…

I didn’t take many wide angle shots as I’m more interested in the macro lens, as such, I will base my views on this lens.

The Review

The pack comes with a new case for your iPhone 4/4S and the lenses screw on to the case, directly over the iPhone lens and flash. This means that the flash is obscured and no longer available for use. This is not a problem in most situations, but if you are planning on using the wide angle lens for indoor shots you need to consider your lighting. Also, the slight ‘neck’ on the vtec case means it doesn’t sit so comfortably in your pocket. The macro screws on to the case first and the wide angle lens is attached over that. The design is great in theory but this is where the unit cost becomes a factor – my only issue is in the build quality. Having only had it for a couple of days, it was very easy to over-tighten the macro lens making it almost impossible to remove. Rather than break it in trying, I have returned mine to Amazon already! It really needs some kind of knurled edge to get hold of.

vtec lens side-on

As you can see, the two lenses don’t protrude too much, and the idea of the case is a good one. I know the olloclip lenses clip over the edge of an (uncased) iPhone, and these come in a bag that doubles as a lens cleaning cloth. Both olloclip and vtec versions are supplied with two lens caps – one for either end to keep the lenses safe whilst in your pocket.

The quality of the macro shots was what really interested me as I like getting up close to photograph textures and objects that I can use in my own artwork. With macro photography, the images themselves are often visually engaging and the vtec macro lens really does enhance the iPhone’s native camera significantly. Without the macro lens, it is difficult to get very close to your subject, maybe 20cm at best. But the macro lens lets you almost pop the lens right next to whatever you are photographing. If you have one of the tripods that are also available for your phone, holding it close is a breeze. The macro shots have a noticeable blur at the edges (like a zoom blur) and this can add some creative potential to your shots. Or, you can “shoot wide and crop” or whatever the saying is amongst those in the know!

Here is a photo of the back of a playing card without and with the macro lens attached.

Without and with the vtec macro lens

Summary

In summary, I think the lens(es) are excellent and if the macro could be removed easily from the case I would have no hesitation in continuing to use the vtec product. The price really makes the product a bargain and in some ways a no-brainer for anyone with more than a passing interest in snapshots. I’m sure the image quality of the more expensive lenses is better, but for the price you are getting an attachment that gives your iPhone a whole lot more potential as a camera.

Having got a taste for macro shots again, I might just check out the olloclip lenses and review those too.

In the meantime, here’s a selection of macro shots for you to check out:

Create eCommerce Online Galleries With Light Blue Software

Stuart — Tue, 21 Feb 2012 15:57:09 +0000

Following on from my post on customising web galleries for Light Blue, here is part two where I am going to show how to add templates, create web galleries, upload them and password protect your client’s galleries.

The focus previously was in customising the galleries, however, this tutorial is aimed at passing on a custom template to a photographer and for photographers wanting to upload their web galleries and password protect them for their clients. Light Blue, is business management software for photographers, running on both Macs and PCs. It can be used to run your photography business, helping you to keep contacts, calendars, prices, invoices etc organised, and it can also be used to quickly create web galleries enabling you to sell your photos online via PayPal.

The software ships with several pre-built templates which can be used immediately for creating your gallery pages. If you have had a template created by a designer, there are a couple of extra steps you need to take to add them to your available templates in Light Blue. Once you have your templates in place, there is a 4-step workflow to getting your photo galleries online and sharing them with your clients.

Create the gallery folder using Light Blue.

Upload it to your web space using FTP (Transmit, FireFTP, Fetch etc).

(Optional step) Password protect the new gallery directory/folder.

Create a page link or a blog Post with a link to the new gallery directory/folder.

Adding or Creating New Templates

Open Light Blue and go to the Settings tab to see where your Archive files are being kept. Yours will be in a different location to mine most likely:

Locate this folder on your system and if you have been supplied with your own watermark file, open the web gallery watermark folder. Rename the file inside here (I called mine original-watermark.png) and copy the new supplied watermark in as shown:

If you are creating a watermark, I would suggest you make something that does not distract too much from the photographs themselves. If you use Photoshop (!), start by creating an image about 210px wide. The height will be determined by your watermark’s aspect ratio. Give the file a transparent background and add your mark on a layer. If you are using a white watermark, reduce the opacity to around 45% and save the file as a transparent .png file.

Back in the Light Blue settings, you can either over-write an existing template or add a new one by clicking the plus button on the web galleries tab. Set or change the values in the top row of boxes to suit the sizes your designer has chosen:

If you have been supplied with template files, click on the folder icon to the left of these text boxes – it has a little green arrow on it. This opens up the folder on your hard drive where all the templates are kept, open at the template you will be using:

Double-click the folder so you are seeing only the contents of this folder in your Finder window. (Here, I am showing my path to this folder for reference.)

Replace ALL of these files with the ones inside the folder you have been given. Delete the content first then drag the new versions in. It should look exactly the same with the new files in place. These contain all the styling for your galleries and can now be used as we start the 4-step workflow shown above.

Web Galleries Workflow

1. In Light Blue, click the Shoots tab and select your shoot by clicking the arrow to the left of the Ref:

This opens the main page for the shoot. Some things to note here, later on you will be building your gallery and the Title (in this case Stuart’s Gallery) will appear as the title of the gallery on the page. The date/time will also appear in brackets, so make this match your wedding/shoot date. Check that you have selected the correct price list for your gallery, then click on the Linked pictures tab:

Clicking the Create folder button opens a new Finder window where you can choose the destination for your Shoot folder.

A new folder is created (you can rename this if you want in the usual way) with two sub-folders inside it; processed and unprocessed. You need to move/copy your raw images here. If you want to use an existing folder, click the Link folder button:

Click Import images and you get to choose a prefix for the images. This starts the import process (using the processed images folder’s contents. When the import is complete they will appear with their filenames, date and file extension shown.

In the Web gallery panel, click on the Template name to select your template. If you click the selection arrow (in red) it will open the template files directory/folder. Give your folder a name. This is the name of the folder you will be uploading so make sure there are no-spaces-in-the-name. Use dashes or upperCaseLetters to name the folders. The spelling is important so remember whatever convention you use, or your link that you add later will not work! Click the Generate gallery button:

A dialogue panel opens, click the Build button and sit back as your web gallery is built. A new web gallery sub-folder is created inside your Image files folder (above), and the folder you have just built is shown. You can open it and test that everything is as intended, by clicking the index.html file inside your new folder:

2. Connect to your website using an ftp app (Fetch/Transmit/FireFTP etc) and navigate to your chosen upload destination. In this case, it will be a “clients” folder/directory. Upload the new folder – the whole thing, not just the contents:

3. This is an optional step if you client wants their web gallery directory password-protected. In a browser window, navigate to your cPanel (as used and shown here) or web hosting Control Panel and log in. Go to the Security section > Password Protect Directories:

Click the folder icon next to the clients folder name, then click on the name of the folder you want to protect:

In the top section, tick the Password protect box. Name the directory – this will be the name that shows up in the login panel and does not have to be the same as the folder you uploaded:

Click the Save button. You can < Go Back to create a Username and Password for your client (make a note of this!!!) then click the Add/modify authorized user button. Click the < Go Back button to return to the previous screen and add any other users who you want to have access to this folder, or just use the same Username/Password for everyone. Users will now need to log in to access this page when you send them the link:

4. On your website or in your WordPress/Joomla (insert appropriate CMS here) you can now create a blog post – add a featured image and whatever text you want, along with a link to your newly-created and uploaded folder. When viewed in HTML mode it will be something like: http://www.your-domain.co.uk/clients/st-gallery/. Publish your page and share the link and any login details with your client.

That’s it – thanks to Light Blue you can now enjoy selling and showing your photographs online.

If you would like any help building or redesigning your websites, drop me an email and I will be happy to discuss what I can do for you.

Customising Web Galleries Using Light Blue for Photographers

Stuart — Mon, 20 Feb 2012 16:54:50 +0000

Recently, a client who is a wedding photographer, asked me about including some eCommerce facility so he could sell prints from his website. He has a client area built using WordPress and galleries were being delivered through the NextGEN Gallery plugin. Finding a way to sell images from a gallery in WordPress turned out to be a challenge on this occasion…

The problem was that some of these galleries extended to over 400 pictures so manually inputting them as products was very time-consuming. After trying various options like Jigoshop, Cart66 and Shopp, he decided to invest in some 3rd-party software written specifically for managing a photography business – Light Blue. Using Light Blue, I was able to build web galleries for Andrew that can be uploaded to his site, where he can offer prints to his wedding clients, in a range of sizes, with payments being handled through PayPal. Customising the templates included with the software involves editing a few files, mainly CSS and HTML. (The jQuery/JavaScript editing for the lightboxes is less of an issue I imagine.) Let’s dip in and make a start!

If you already have Light Blue set up, jump to the styling section here.

This is part one of a two-part tutorial. Part two is aimed at designers who are asked to style Light Blue templates for their clients, how to use the templates to generate online galleries, and password protect your client’s photographs.

Light Blue

Download and install a 30-day free copy of Light Blue from their website. Both Mac and PC flavours are available – I’m working on a Mac so this is based on my system. Install it in the usual way for your operating system and you will be asked to select a folder for Archive & backup. Your theme templates are going to be created in here during installation.

Once installed, go to the Settings tab and enter the name of your client in the Registration name field for the Licensing section. This is going to be used in your page templates so it is helpful to enter their name so you can see how it looks on your pages. Still on the Settings tab, click the web galleries section on the left to input the URL for the website and their PayPal email address:

If you want to create a Price list for your client, click the Price lists tab across the top of the Settings bar and add your print sizes and prices. These are going to show up on your pages as drop-menu options. Some of the templates already have some price lists that you can edit if you prefer. If you create your own, you need to make sure you tick the “Use on web” box or they won’t appear. Now you need to go to the Shoots button and import some images to use for your galleries.

Create a shoot by filling out some details and set your Price list. The Title is going to appear as your main gallery page heading, on the page, and by default, the Start date/time appears next to the title in parentheses. Click on the Linked pictures tab to import your images.

Clicking the Create folder button creates the main folder to hold your shoot images and web galleries. It has 2 folders inside it for processed and unprocessed images.

Alternatively, you can link to an existing folder using the Link folder button. For the purposes of styling your web gallery template, drag or copy your pictures into the processed folder and once they are there click the Import images button.

Styling Your Web Galleries

You can now check through the supplied Light Blue templates to see if you have something you want to work with. Click the field next to Template and a drop-menu appears with a list of available templates. Create a folder name, bearing in mind that this will be the name of the folder you are going to upload. Make sure there are no spaces: use dashes, underscores or camelCaseCapitalising for your folder name.

Click the Generate gallery button and your folder will be created, with the name you chose above. Open that and you will see an index.html file that you can double-click to load in a browser and check out your gallery. Generate previews only creates the images that will make up your thumbnails and large images. Once your gallery page loads in the browser window, you can see how things look and repeat the process of generating new folders using different templates. This is the slow bit, but a quick way of working is to use a small test set up of images, say 10 – 15 so you get an idea of how they sit on the page. When you find a template you want to work with and style, click the arrow next to the Template name and it will take you to the list of templates. You can now set the sizes in pixels of large (lightbox) images and thumbnails as well as the image quality. folder where the necessary files are kept.This can also be accessed by going to Settings > Web galleries:

Clicking the folder icon with a green arrow on it, beside the template name takes you to folder containing the files you are going to edit. There are 2 HTML files and a resources folder. The template you choose determines what is inside the resources folder, but it may have an Images sub-folder and folders for Scripts and Styles. Generally, the css styles for the pages will be declared in the pages themselves. They can be moved out into a separate css file that you link to but this is only advisable if the image sizes are not going to be changed! The 2 HTML files are:

imagePage.html – The page template for single images
thumbsPage.html – The gallery page and folder index page itself.

Styling the Web Gallery Page

Open thumbsPage.html in a text editor (NOT Microsoft Word!) The uses the name of the shoot along with the date/time. After this you get some styles, most of which have obvious names, and you can add your own styles here or create your own stylesheet in the resources folder and link to it. At the most basic level, you are very likely going to want to edit the body style so the color and background matches your site. If you use a background-image, add it to the Images (capital I) folder in your resources folder if you have one. The #shootTitleContainer is for the on-page title and this is followed by a <div>that holds the thumbnails and the code for their large overlays. If you have chosen an eCommerce template, there will also be a with inline styling for the ‘Buy this image’ link. Beneath this is the #footer <div> where a link to the website home page sits. This address was set in the Settings > Web galleries > Home URL box earlier. You can add or change what is here if you wish. In fact, if you want to use an included file like a sidebar.html, there is no reason why you can’t add all that to the page markup. <h2>Individual Image Pages</h2> The imagePage.html can be edited for the pages that are generated for all the individual images. Again, the <title> uses the shoot title and date/time and if you have chosen an eCommerce template %eCommerceScripts% appears in the document <head>. Don’t delete this or your price list will not show on the page; there is an #eCommerceContainer <div> that holds the vital %eCommerce% reference and you can style this if you want to using the select element. Again, the css styles are embedded in the page and you can edit them or add your own. Here are the elements you can edit straight away – click on the image for the full-size version: <a href="http://haizdesign.com/blog/wp-content/uploads/2012/02/css.jpg" rel="lightbox[1363]"></a> If you need any help styling your Light Blue web galleries or are interested in having your site redesigned, <a title="Contact me for help with your web galleries" href="http://www.haizdesign.com/contact.php">contact me</a> and I’ll be happy to help. </article> <article> <h1>How to Exclude a Category From Your WordPress Home Page</h1> Stuart — Tue, 07 Feb 2012 13:50:45 +0000 If you have a WordPress site with a list of posts for your home page, it is easy to exclude a category so it doesn’t appear in the list. You might want to do this if you have a category that appears as a page in it’s own right, such as a client area on the <a title="This blog has a client area that does not appear on the home page" href="http://www.andrewolneyweddingphotography.co.uk/clients/" target="_blank">Andrew Olney Wedding Photography</a> site for example. (The client weddings are in the category of Weddings and have their own button on the site navigation.) It is fairly easy to exclude a category from your home page with 4 lines of code, or 5 if you include the comment! Open up your loop.php (or page.php depending on your theme) file and look for the line that starts the loop: <?php while ( have_posts() ) : the_post(); ?> Just before that, you want to add this: <!– exclude the weddings category from the home page –> <?php if ( is_home() ) { query_posts($query_string . ‘&cat=-1′); } ?> In this example, the number 1 refers to the category we want to exclude. To find the category number you need to go to the Categories page in the admin panel and hover over the category name. You’ll see the number in the status bar at the bottom of the browser window. Save your loop.php (page.php) file and that’s it. A side note for people using the twentyten or twentyeleven themes who want to display a category on it’s own page; these themes use the_excerpt() to display the listed content. If you have links in your entry that are not showing or working as hyperlinks, look for this section of code in your loop.php file: <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?> <?php the_excerpt(); ?> Change the_excerpt() for the_content() and your links will work again. </article> <article> <h1>Updating WordPress Fails – How to Fix Update Problems</h1> Stuart — Tue, 17 Jan 2012 12:00:13 +0000 If your WordPress update fails, there may be a quick solution at hand that may not involve manually restoring several critical files. I recently encountered a problem when updating a client’s WordPress-based website; the update failed. In fact, several attempts failed in spite of logging out and back in again, clearing browser cache and scratching my head a couple of times. With frequent updates to the core WordPress installation, there are two methods of updating your main site files; either automatically or manually. If you see the nag/notice screen at the top of your admin area click on the Please update now text and you’ll be taken to the update page with the options buttons: Clicking the blue Update Now button should start the process automatically and as of version 3.3, once this successfully completes you should see a “What’s New” screen. If your update fails for any reason, you should download the files using the other button and take a full back-up of your WordPress site. The best way to do this is is via FTP. There are several apps and programs for this, and a lot of people like the free <a title="FireFTP plugin for Firefox" href="https://addons.mozilla.org/en-US/firefox/addon/fireftp/" target="_blank">FireFTP plugin</a> for Firefox. (It is a good idea to backup your site before any major update to your core installation.) Download the entire folder or directory your site is sitting in.) Use the WordPress Tools menu to export a file which you can also use for moving content from local to remote installations, or when moving your WordPress site to another web host. Export all the content and images too as this covers all your bases. If you are moving a site, you can import this file through the Tools menu to fill your new installation with your content. Now you have a backup, it is worth logging in to any cPanel or web hosting account panel you have that lets you see how much web space you have left. This can save you a lot of work! If you are over your limit or have almost no room to spare, updating WordPress might be an issue. Check to see that you don’t have full email boxes or large backup files eating in to your web space. Clearing some of this out might make all the difference, so if you have this situation and have deleted some unneeded content, try the WordPress updater again. <blockquote>If you use a WordPress backup plugin, you will have options to state how many backups you want to keep. Some of these backup files can be quite large so think how many you need and how often you need to back up your site.</blockquote> If this doesn’t work, you can trying disabling your plugins and seeing if that makes a difference. You can deactivate them all in one go using the checkbox and drop menu on the Plugins > Installed Plugins page. If that doesn’t work, changing some of your WordPress files may be the way to go. <ol> <li>Using FTP, delete the wp-includes and wp-admin directories.</li> <li>Upload the new ones (from the files you downloaded right at the start.)</li> <li>Upload any loose files from your wp-content folder, but do not upload the whole folder or delete the existing one. You will be over-writing any existing files at the root of the wp-content directory.</li> <li>Upload all the new, individual files that are NOT in the wp-admin, wp-content and wp-includes directories to the root directory of your site (or wherever you installed WordPress.)</li> </ol> If you had a failed automatic upgrade, using FTP you need to remove the .maintenance file to clear the “Failed Update” nag message. Hopefully, you should now be able to update your installation. </article> <article> <h1>Espresso 2 by MacRabbit</h1> Stuart — Mon, 12 Dec 2011 13:07:38 +0000 If you design and develop websites and are looking for an excellent, feature-packed editor to speed up your coding, then you won’t go far wrong with <a title="Espresso 2 by MacRabbit" href="http://macrabbit.com/espresso/" target="_blank">Espresso 2</a> by MacRabbit! With built-in FTP support and a host of useful features, this is my favourite text editor to date. Since moving away from the increasingly-bloated Dreamweaver some time ago, I have tried various other options for coding websites. I have tried TextWrangler, Komodo Edit, Coda (demo only as it never had all the features I expected to find, and the Coda 2 release is taking forever to arrive) and TextMate which has been my longer-term favourite. However, I think my search for an editor may be over as Espresso 2 does (almost) everything I want and beautifully too! You can get a fully-functional 15-day demo here: <a title="Espresso 2 by MacRabbit" href="http://haizdesign.com/blog/portfolio/hobarts-estate-agents-website-makeover/" target="_blank">http://macrabbit.com/espresso/</a>. <h2>Initial Steps</h2> After installing, I had to make a couple of changes in my System Prefs, as I’m a UK user and Espresso uses the Mac’s internal understanding of word characters to govern its selection settings. (Double-clicking in URLs selected the entire string including the .com). To fix this I went to System Prefs > Language & Text > Text tab and chose English (United States computer) for my Word breaks. This worked fine after a restart of Espresso. <div id="attachment_1308" class="wp-caption alignleft" style="width: 272px"><a href="http://haizdesign.com/blog/wp-content/uploads/2011/12/projects.png" rel="lightbox[1300]"></a>Espresso Projects</div> I then went to File and created a New Project. Like TextMate, if you do this you can do site-wide searches which is really hany when working with a CMS like WordPress and debugging or editing files. Project icons can be coloured and have graphics added to them, making it visually very quick to select from one of several projects. <h2>Espresso in Action</h2> The interface is really good to work with, particularly if you are a mainly front-end designer. You have the project files displayed in a vertical list down the left side and the edit window in the middle. On the right, there is the option to show the code navigator or CSS tools. This can be switched on and off with the slide of a button or using cmd + i. The navigator helps you to quickly see and jump to points in your code, using a tree structure to display your document hierarchy. It has folded blocks so you can hide and show just what you need to. (The code editor has code-folding too which is one of the odd omissions that stopped me going any further with Coda as an editor.) Other than code-folding, other very useful features include code-completion and syntax error detection and colouring. You can work with the defaults (I do) or make your own theme. Espresso uses Sugars to extend the functionality and these are much like TextMate’s bundles. My only wish is that there was a visual editor for creating your own Sugars. There is a Snippets editor and this provides a means to add quick code snippets to your files. <div id="attachment_1314" class="wp-caption alignright" style="width: 310px"><a href="http://haizdesign.com/blog/wp-content/uploads/2011/12/main-window.png" rel="lightbox[1300]"></a>Main Espresso window</div> Standard HTML files can be previewed with live updates (no refresh needed) and there is a feature called X-Ray which lets you see how your CSS is affecting your layouts. This is a little like using Firebug and it’s a great little tool. There is support for a range of languages including HTML5, CSS3, JavaScript, PHP, Ruby, Python and XML. There is no native Diff support for checking or comparing files, although there is a <a title="Changes file comparison app for OS X" href="http://connectedflow.com/changes/" target="_blank">Changes app</a> Sugar which can be installed from Changes. You will need to set Espresso to open in 32-bit mode for this to appear on the Actions menu and I’m not able to get it working as it does properly in TextMate yet. This means running it in the background. For CSS editing, MacRabbit have integrated their CSS Edit app, making it a breeze to style your content. In most cases, I find it quicker to manually write the styles for my elements, using the code-completion making it faster still, but for me, this really comes in to it’s own when it comes to colour selection: <div id="attachment_1321" class="wp-caption alignleft" style="width: 278px"><a href="http://haizdesign.com/blog/wp-content/uploads/2011/12/color-picker.png" rel="lightbox[1300]"></a>The Color Picker</div> When I want to colour my elements, I have often gone through a bit of trial and error to find the right tints and tones. With Espresso, this is now incredibly easy as I can work with a familiar colour picker, that lets me also control opacity! Best yet, there is a magnifying glass icon that lets me pick colours from outside of my Espresso workspace. This alone has made me very happy and it is one of my most-used features surprisingly! Creating CSS3 radial and linear gradients is equally super-easy, making a pretty hefty chunk of code writing effortless. It automatically creates all the code for -moz and -webkit gradients, along with the angle in degrees. If you want to change the angle, it updates both vendor-prefixed lines on-the-fly. Again, the navigator helps out by giving you visual feedback on the styles in your document. The styles can be re-ordered in your file by simply clicking and dragging them into their new place. This is a fast way to move styles about if you have issues with the cascade in your file. It is obvious that a lot of thought and work has gone into Espresso, from the point-of-view of the end-user and the support provided by Ian at MacRabbit has been excellent. <h2>FTP Support</h2> Once you are ready to upload your files, the built-in ftp options make this simple too. You have a choice to sync your site or use one of a couple of other handy methods; auto upload or quick publish. To get started you need to set up your server(s). Click on the Settings button and a nice animation opens the panel to set your servers up. <div id="attachment_1324" class="wp-caption alignnone" style="width: 310px"><a href="http://haizdesign.com/blog/wp-content/uploads/2011/12/servers.png" rel="lightbox[1300]"></a>Espresso FTP servers</div> There is support for FTP, SFTP and S3 engines and you can have more than one server! This is yet another one of those really useful features. If you are working on a development server you can set that up, along with your live site, then you simply decide which server you want to upload files to. No more switching between settings or using a third-party FTP app, this is as simple as choosing from a drop-down menu! To enable auto-uploads, just switch the server of choice on and every time you save the file it uploads to the server. Or, you can right-click on your file in the left pane and upload it to whichever server from there. Or, you can connect to your ftp server and drag files from the left pane to wherever you want on your server. Hover over your directories to expand/open them. <h2>Summary</h2> This really is a scratching-of-the-surface as far as Espresso 2 is concerned. I’ll add some of the shortcuts and snippets I use most in another post soon. I mentioned that you can extend the app with Sugars and I would suggest these for a start: The <a title="HTML Bundle for Espresso" href="http://onecrayon.com/products/htmlbundle/" target="_blank">HTMLBundle</a> which includes some of the TextMate snippets. The <a title="jQuery for Espresso" href="https://github.com/derekr/jquery.sugar" target="_blank">jQuery Sugar</a> adds autocompletion for jQuery methods. Ian’s <a title="Edit multiple lines in Espresso" href="https://github.com/onecrayon/Handy.sugar" target="_blank">Handy Sugar</a> lets you edit, prepend/append multiple lines at once, and has a neat increment for numbers. Espresso 2 is beautifully-written, a pleasure to use and makes coding quick and easy. At the moment it costs $79 (£50.61) which is certainly very good value for money. I keep discovering useful features and if built-in file comparisons and a visual sugar editor were added, this would be the best Espresso I ever tasted! </article> </main></body></html>