EZPDF and TCPDF relied on the template document being created from a PHP script meaning as a coder – you have to learn a vendor specific API and use PHP on the server side. The construction of the templates is written in PHP and uses library specific calls.

DOMPDF – we trialled this library as the HTML to PDF conversion feature sounded too good to be true and in all honesty, it was. We came to the realization that layouts and assets designed for screen just don’t look good when converted to PDF and if the process is automatic and anything looks wrong – you have no control over the result.

Enter Apache FOP

OK – so we do have an API to learn – but … it’s a W3C recommendation based on XML and XSL-FO.

This means that the technology is not a closed book and can be used with other vendor products. Anyone can learn how to use XSL-FO and there are a number of different Vendor Processors to convert FO documents into PDF’s. So investment in the technology doesn’t lock you in to one specific Vendor.

XML data can be bonded with XSL stylesheets to produce XML-FO documents which Apache-FOP then turns into great looking PDF documents.

The FO specification allows for a great level of document customisation. Apache FOP supports some really nice features – particularly SVG compatibility so we can make PDF’s with really clear corporate logos. See the PDF sample enclosed.

We actually went one step further and made an extra XSL stylesheet to translate the XML-FO back into HTML so we could have a web preview of the PDF documents.

The basic workflow looks like this:-

The round boxes show the documents and the square boxes show the processes.

The nice feature of this workflow is we only have one structural document – the XSL-FO document defines how the XML gets adapted into the presentation layout and so for any changes in the desired presentation – it’s the sole document you need to edit.

The XML-FO document created by translation is itself translated one more time into HTML. Why the two step translation? Because it avoids having two documents containing the presentation logic and once a system is up and running – this is going to be the place we do any maintenance if we want any new document features or layout changes.

This works nice as long as the HTML document doesn’t need to be too specific. Otherwise you just have to have two core template documents; but we’ve not encountered that situation just yet.

See the example output documents here:

1. PDF
2. HTML

Every step in the process uses industry standard open source technology and open protocols that are well understood by the programming community. For technology adopters this means no Vendor lock in – Web Engineer can provide training and implementation of open source technology solutions. We are confident that you’ll like our service and if you don’t, there’s nothing to stop you using someone else.

Step 1: (optional)

Once you have got your HTML file, you may need to make some basic changed to it, i.e. to match your specific job specification and details. This can be done in any text editor such as notepad. As long as you just edit the text and leave the code you should be fine!

Step 2.

Go to your Thunderbird email client and click on “Account Settings…” from the “Tools” menu at the top of the screen.

Step 3:

Click on the tick box “Attach the signature from a file instead (text, HTML, or image)”, and click on “Choose” to browse to select your html file.

Step 4:

Now you can write an email in the confidence that you are giving a professional image to your clients.

As we all know, this is far from reality.

As long as you have a camera that can take a good photo, you can use software to turn an average photo, (for example) into a product image on your merchant website. Maybe this needs to be square, particular dimensions,.. whatever the requirement, software can help achieve the result.

Which software? In this article, I'll be using Gimp, which not only has a great range of features, it's also free!

Download it from www.gimp.org

Installation is straightforward – just follow the instructions and you'll be ready to go in a couple of minutes.

I'm going to go through the steps needed to crop a photo for our good friend Rachael over at www.littlestitch.co.uk. This site often features products shot on a plain background in isolation.

Step 1. – Get snapping!
Product shots are normally shot against a plain background with good lighting. As you can see from the image below, here is our photo, straight from the camera. No tweaks, other than resizing to fit on the page below.

Next, open up Gimp, then choose File>Open, then navigate to and open an image. (You can also drag and drop the file, from your browser into Gimp.)

Step 2. – Crop – removing the excess parts of the photo, focussing more directly on the subject.
The product shots on littlestitch need to be square…

Region Select Tool (Keyboard shortcut – R)
Click the left mouse button, in the upper area of the photoshop, then hold the 'Shift Key'. As you drag you see it will create a square marquee. Let go of the left mouse button to confirm your selection.
If the marquee is the right size, but a little off to one side, simply click in the middle and drag it to a new location.
Once you are happy, choose Image>Crop to selection from the menu at the top.

Cropped Image

Step 3. – Levels – How vivid the black and whites are.
The best way to learn what this means, is to try it!

Choose Colours>Levels

Input Levels

From left to right, the graph shows how much black and white populates the image.
If the peak were over to the left, the image would be predominantly dark, and over to the right, light!

By dragging the black (left hand) slider to the right, we're making the darker areas of the image, even darker.
By dragging the white (right hand) slider to the left, we're making the lighter areas of the image, even lighter.
As a good starting point, these should be set either side of where the peak starts to build upwards.
Once you have set these sliders, move the grey (central) slider left and right to adjust the overall tone of the image.

After Levels tweaked

Step 4. – Sharpen – Add a little more definition.

Choose Filters>Enhance>Sharpen

Moving the slider to the right will make the image more defined. It's a subtle enhancement but worth it!

Before and After Sharpening

Step 5. – Scale – Changing the images dimensions

We don't need our product image to be any larger than 300px by 300px.
Enter 300 in the width box, (height box will match this by default) and click 'Scale'

As you can see, we went from a good, but dark photo and turned it into our final product shot.
It looks great!

Below is the final product image at 3 different sizes:
300 x 300px, 180 x 180px, and 75 x 75px.

To begin a new repo the following steps should be observed – note this assumes the default master branch is the name of your main development branch and that the remote will be called origin.

First create the remote repo on the network drive, dont forget the foldername should end .git, cd to this folder and run -

git --bare init

Then create your local repo, cd to your folder and run -

git init

You now have your remote repo ready to be linked. Once you have made your initial commit you can push your files up and associate this to the new remote by running -

git remote add origin [NETWORK PATH TO REMOTE].git

Finally push to this remote, the following command will automatically link your branch to the remote -

git push -u origin master

You can then commit as usual and use push/pull to send, retrieve updates from the network server.

This year we were going to post cards for a change, then we thought better of it, and decided to make a donation to Headway Devon instead.

This donation included supplying them with a complete re-brand – realising this in stationary, popup display banners, Facebook and twitter badges/theme graphics.

You can view the card here – we hope you like it!

We had a lot of fun piecing together this years e-card. The aim was to come up with something simple with a link to our "labs" development blog. We wanted to avoid flash this year and create something that would work cross device.

Once we had settled on an idea the visuals and sound were worked up. Although a simple idea, we wanted to take this as far as we could without using any third party plug-ins.

Using the progressive enhancement approach the page features a combination of scripted animation and css transitions to enhance the page, while still functioning no matter what the device/browser is viewing.

Weather you're viewing in a text only browser, have javascript disabled or are using explorer, the greater the capabilities of your browser, the more complete the effect will be. We've pitched the level of animation and effects so they should run well on handheld devices/mobiles whilst still looking good on the desktop.

CSS3 support is getting much better, however some features are yet to be supported within all browsers, notably the swaying of the decorations which (at the time of writing) can be seen in all the major graphical browsers except Internet Explorer and Opera.

What has been interesting is how well the browsers cope with this – Firefox notably seems to use far more processor than Chrome which came out top in our tests.

Browser test results – scoring was out of 100 based on the concensus in the office, browser versions were the current relesaes at the time of writing.

Although the card does function in all the major browsers at an acceptable level there are some that out shone others. Still early doors on CSS3 transitions though this experiment did throw up some interesting results.

There are to many 'static' websites out there that are never updated, or their content is rarely changed.Hours are spent making the site, making it look great, making sure it works correctly, but if the content is old and boring, visitors may look at it a couple of times at the most and never again.

The more successful sites, are updated with new content regularly. This needn’t be a new product, special offers or anything big or time consuming to put together. It could be something as small as a couple of sentences, or a new picture. If it’s something a visitor has not seen before and it catches their attention, it will encourage them to visit the page again and hopefully pass it on to their friends or work colleagues. Before you know it, 10 more people have viewed your site!

Think of each item of new content, as a 'post'.

• It can contain text, a picture, a hyperlink to another website, a video…or a combination of all 4 perhaps?
• What should it say?…anything that the author chooses to write about. Just make sure it's interesting and you'll have visitors revisting your site time and time again!
• Posts can be viewed by visitors to your website and they in turn can leave comments or feedback.
• If you later decide your post doesn’t quite look as you initially thought it did, or you just want to change a word here and there you can edit it.
• Comments and feedback left on posts can be moderated to make sure no-one writes anything they shouldn’t.

Every time a new post is created, it is automatically stored in a database along with the time and date it was created.
These posts will be displayed in chronological order on your web page and can be navigated quickly via hyperlinks.

Visitors can easily view posts made on a particular day or month and still see the post they found particularly amusing 9 months ago.

The process of regularly creating posts and making them available for the world to view is known as ‘blogging’.
The page where all your posts are accessible is referred to as your ‘blog’.

Blog’s will typically appear on your homepage, but can be elsewhere on the site to.

Baring in mind a visitor will likely land on the homepage first, it is a good idea to at least have a summarised blog, or maybe just the latest post appear somewhere on this page.
Again, sites with fresh content will have visitors coming back over and over again.

Page, refers to a unique section of your website.

You may have pages such as “About Me”, “Previous Work”, “Contact”… all the important need to know stuff.
It’s a good idea to have separate pages for this kind of information because it allows the visitor to find what they are looking for very easily.
Imagine having all the information on one long page…You would wear out you're mouse's scroll wheel trying to find that key piece of information you're looking for.

So in summary…

• Create regular posts to keep your website fresh and keep visitors coming back.
• Create new pages when the information is important and unique to the rest of the site.

Using images can greatly improve the look and feel of your website. Remember the phrase “A picture is worth a thousand words”…

9 times out of 10, a typical photo or image that hasn’t been acquired from the Internet in the first place, will have a large file size. These days, file sizes for photos taken by a handheld camera can range from 500kb to 5mb…even larger with the more expensive, higher megapixel cameras.

An important thing to remember when using images on your site is that they will increase the loading time for the visitor.

We all know how frustrating sitting and waiting for a page to load can be and more often than not, this is caused by media content such as images and videos. Even though Internet speeds are constantly improving, it still remains an important and good practice to put your images through a couple of processes before uploading them to your site.

This may sound like a lot of work, but it really isn’t after you’ve done it a handful of times and just remember, it will make your site load a lot faster!

Image optimisation in plain English, is making your images ready for the Internet – Reducing their file size so they will load fast, whilst maintaining the right balance between quality and file size.

Luckily there are a handful of free programs available for download that make image optimisation incredibly fast and easy to accomplish.

One such program is which I highly recommend is:

RIOT – http://luci.criosweb.ro/riot/download/

Note. During the installing process, on the final page before it begins to install, it will ask if you want to install ‘PC Speed Up’…Choose the 2^nd option ‘I do not want to install PC Speed Up’…then click install.

Once installed, open up the Riot program (Start>All Programs>Riot>Riot) and you will be presented with a screen like this. (Pic imgopt_1.png)

The quickest way to learn is by doing, so go ahead and click the ‘Open…’ Icon, browse to a picture and hit open.

The image on the left is the original image or ‘initial image’. The image on the right is the optimized image.

Below these images are a number of settings which we will briefly discuss.

JPEG, GIF or PNG… Image types.

This refers to how the image will be processed and stored.

For an in-depth understanding of each image type, a quick search on Google will give you all you need to know. But for the purpose of this how to, choose the appropriate type, depending on the initial image…

JPEG

For rich photographs with deep colour and dynamic lighting.

This uses a lossy compression technology, which means that some of the image quality can be traded off to achieve a smaller file size.

GIF and PNG

For logos and images containing large areas of the same shade of colour.

The opposite of lossy, is lossless compression technology, whereby the image retains it’s original quality.

PNG has the advantage of being to use a colour palette with millions of colours, whereas GIF uses only 256.

The great thing about Riot is that you see the ‘optimized’ image on the right hand side and just above that, the file size to (In dark red text). Now, it’s simply a case of experimenting with the image types and the ‘Quality’ slider immediately beneath until you get a nice small file size, whilst maintaining a high quality image.

The final step, is resizing the optimized image. If you only need an image 200 pixels wide, then optimize it to 200 pixels wide in Riot, rather than using a bigger image and scaling it down on the web page itself.

The final step is clicking the ‘Save’ button. Enter a filename, hit save, done!

For more detailed information on using Riot, refer to the help documentation. It’s very easy to follow and runs through some of the additional options such as ‘Compress to size’ and ‘Image adjustments’.

Adobe Fireworks

While Riot is a great piece of free software, I would highly recommend Adobe’s Fireworks if you can afford to splash out £200+.

It’s both Windows and Mac compatible and one of the features I find most useful in Adobe Fireworks is being able to slice up an image and then save the slices as individual images. Not only that, you can specify the image type for each slice and preview them as you decide. Here’s how:

Open up Adobe Fireworks (Start>All Programs>Adobe>Adobe Fireworks CSx)

From the menu at the top, choose ‘File>Open’. Browse to your image, select it and click ‘Open’.

Click the Slice tool from the ‘Web’ panel on the left (Keyboard Shortcut: K)

Now click and drag on the image to start drawing where you want the image sliced.

Once all the slices are drawn click on the ‘Preview Icon’ above the canvas.

Now you can click on each slice to set the output image type, quality etc from the dialogue boxes on the right hand side.

You can edit multiple slices at one by holding the shift key, then selecting the slices one by one.

Keep an eye on what the slice looks like, as well as the output file size (displayed to the lower left of the canvas) as you change the image type and move the quality slider up and down.

Once you are happy, choose ‘File>Export’.

From the ‘Export:’ drop down list, choose ‘Images Only’. Make sure that ‘Slices:’ is set to ‘Export Slices’.

Give the image a file name*. Hit Save.

*When saving multiple images, the filenames include a row and column position reference to make them easily distinguishable.

Eg. Sky_r1_c1.jpg, Sky_r1_c2.jpg, Sky_r2_c1.jpg, Sky_r2_c2.jpg… etc.

Fireworks is a great piece of software and definitely worth the investment if you plan to edit a lot of images for use on the Internet.

This means that the staging and proofing branches need to be reset, from time to time. This is particularly likely in the staging branch which is reset every time a new feature is earmarked for release to a live branch.

To reset your local staging branch you first need to make it equivalent to live – this is done by running the following -

git checkout live

git update-ref refs/heads/staging refs/heads/live

That checks-out the live branch and points your local staging to your local live (which you should make sure is up-to-date first).

You will have to force your branch back to the remote however, since your now potentially behind the old staging to force the remote update run -

git push origin +staging

This does mean that when staging features to the staging branch you should either routinely reset the stating branch to live using the above (this is the preferred method) or as inevitably happens you need to stage more than one thing on staging you should always check that your not ahead of staging when you pull. If your ahead of staging on a pull then it's likely it has been reset!

To reset your local staging in the event that your branch is ahead of the remote you can easily reset your local branch staging branch by running -

git checkout staging

git reset --hard origin/staging

This could of course be automated… *ant*

We're looking for new team member(s). Are you interested in working with an Exeter based creative web development company? We are looking for new key team members who are bright, keen and committed to providing and supporting first class web design solutions. We're open to consider a variety of applicants, provided we can see a fit within the team. The current need is predominantly support based, however there will be significant potential to nurture skills.

Are you proficient in getting to the crux of a problem, are you happy looking at server logs, debugging pages and front end scripts. Do you have a working knowledge of HTML and managing issues and communicating with customers – are you interested in developing that knowledge further and potentially delving into development? We're looking for applicants that have the potential to become great developers and will be looking to develop those skills by working with the team.

Please see our main site for examples of our works and to get a feel for our current team, what can you bring to the mix.

Freelancers

We're also looking to build on our network of freelance specialist programmers and designers, if you consider yourself eligible feel free to send in your CV, please include examples of your work, references and rates.

If you're interested please send your CV to jobs<at>web-engineer.co.uk.