SSL - How it works

Idiots Guide to how SSL Works

There are 3 elements to SSL

• Asymmetric cryptography (public-key)
• Symmetric cryptography
• Digital certificates

Asymmetric cryptography involves a public and private key pair. The server keeps the private key secret, and passes the corresponding public key to any client that wants to communicate securely. Anything encrypted by the public key can only be decrypted by the private key, and vice versa.

Symmetric cryptography involves a shared key that can both encrypt and decrypt information.

A digital certificate verifies that the server holds a valid key issued by an approved Certificate Authority for a particular domain.

Here is a very simplified, cut-down sequence of events that initiate an SSL session between a browser and a web server:-

1. The browser makes a request to initiate an SSL connection.
2. The web server responds with the digital certificate which includes the public key of its public/private key pair.
3. The browser validates the certificate then generates a symmetric key which it encrypts using the public key and sends it back to the web server.
4. The web server decrypts this symmetric key using its private key, and subsequent communication is encrypted using this symmetric key which is only known by the browser and web server.

Q: The SSL initiation involves the public key being passed from the web server to the browser in the clear. So why can't a packet sniffer pick this up and pretend to be the browser?

A: The browser generates the symmetric key, and encrypts it using the public key. As only the corresponding private key on the web server can decrypt this, a sniffer that has picked up the public key can't get hold of the symmetric key.

Marney Electrical Prototype Designs

Paul,
I proposed a design based around "web 2.0" principles - that is:

- simple
- targeted goals
- glossy finish

I have three mockups all based around these principles. I'd be interested in how you feel about each one, and what elements you like or dislike, and hopefully this should give us a clear direction for the design. I'll then put together a final mockup with full-quality finish to base the website on.

Mock-up 1:



click on image for full sized version.

This has a bold purple top bar incorporating your logo and the website navigation. However, this would mean changing the background colour of your logo, as well as changing the text to white, which goes against your wishes of leaving the logo untouched. However, I've just put it as an option.

Then in the main body I've put two large sections for electrical and tv. I've got the colours wrong for these, but hopefully you get the idea. There's room for the summary text below.

Mock-up 2:



click on image for full sized version.

This version ensures that the logo can remain untouched on its white background, with the nav bar underneath. Below that, there's a variation of the two blocks for electrical and tv. They currently look a little basic, but would have a glossier finish if we go with this layout.

Mock-up 3:



click on image for full sized version.

Top bar and nav similar to version 2, slightly glossier look and have put the phone number there as a key bit of info we want easily available up-front. Put the text outside the lozenges - just using them to draw the eye to each option, and the colour helps identify which one we're talking about elsewhere on the website. Summary text below dotted line.

Summary

Basic aim is to keep things simple, and try and make it easy for the user to see the information they want, and understand the actions they can take. Using big blocks of colour to keep electrical and tv separate. Using short, large summary text to describe the services you deliver will quickly reassure the customer you provide what they need, then draws them into the more detailed pages.

Have a look, and let me know your thoughts, and what sort of direction you would like to go in with the design.

Thanks very much!

Guy

SEO

Tools

Google Analysis Tools

Google Analytics
Google Webmaster Tools
AdWords Keyword Tool

SEO Analysis Tools

Domain Tools
SEO Company

Keywords

Analysis of keywords related to shows the following:

1. motorcycle paint 9,900
2. bike paint 5,400
3. honda paint 5,400
4. kawasaki paint 2,900
5. yamaha paint 2,900
6. motorbike paint 2,400
7. motorcycle paints 1000
8. vespa paint 880
9. scooter paint 720
10. bike paints 720
11. motorbike paints 110

This make is pretty clear that I should focus on the following keywords/phrases:

• motorcycle paint
• bike paint
• motorbike paint
• honda
• kawasaki
• yamaha

As you have to consistently use your keywords and phrases everywhere in your text (title/description/content), I've just kept the manufacturer names by themselves.
My title will be: RS Motorbike Paint - Motorcycle paint, bike paint, Honda Yamaha Kawasaki

In theory, if we get to the top of the rankings for all these keywords, there will be around 900 people a day doing a google search and seeing RS Motorbike Paint at the top (based on average volume for these keywords searches Dec 08). Therefore, if around half of these click through, we can aim for 500 visitors a day. Currently peaking at around 100 a day.

Small Business Online Marketing & Sales

From the perspective of a small business who provides mail-order products, such as RS Motorbike Paint, here's an example strategy to create an online marketing and sales capability. Adding together the various options available, here's an example strategy. I think it makes sense to go for minimal upfront investment, and operational costs - both in time and money. The ability to measure the effectiveness of the online channel is also important, as is the option to incrementally increase investment in the channel if the stats tell you that the investment is worth it.

Step One: Visibility

The first step to an online presence is a professional website with a strong brand image and well structured information. This includes a domain name "yourbusinessname.com" and email addresses "orders@yourbusinessname.com" etc. To begin with, the key purpose of the website will be to give the customer the assurance that you are the business that they want to deal with, and guide them to your phone channel. The key to utilising both the phone and online channels properly is to ensure that both the phones and emails are well manned, with well defined processes run off the back of them to agreed SLAs. This will give your customers rapid feedback and confidence that the online channel is being well managed. Online customer experience and customer service is as important as offline.

Add your domain name/url to all your business cards, letter heads, company vehicles etc.

Search-engine optimisation is very important at this stage to allow your customers to find you via Google.

You need to have statistics available from your website service provider so that you can see, at a minimum, how many people have visited your site. Being able to understand the proportion of people who make contact is a key statistic.

Also, adding your company to yell.com and linking this entry to the website is a very useful way to channel customers to your website.

Step Two: Online Marketing

The easiest way into online marketing is via Google AdWords and AdSense, paying per-click. It might make sense to put together some simple ad banners, but this is not necessary with Google, which primarily operates on a text-advertising basis.

Identify key websites that have a large user-base primarily made up of your target demographic and see how you can get your links and marketing onto their site. Keep these to a minimum as they probably cost more and take more management effort.

Step Three: Online Sales

Create yourself as a business on ebay and list your major products there. Its probably worth making the jump to an ebay store at this point to ease management effort, provide a consistent set of product offerings, a single url to link to, and a more consistent online brand image.

Link to this prominantly from your Step One "Marketing" website wherever the customer may want to buy immediately. Also, take advantage of the various tools provided by ebay to manage and monitor your online store, plus take advantage of the access you have to ebay's user-base through optimising the keywords you use to describe products, and also cross-marketing with other stores.

Online Sales

Once you've got people to your website through your online marketing, and they've found the product or service that they require, you need to make it as quick and easy to buy that product as possible. If done properly, the best way to do this is to offer an online catalogue with checkout capability.

Ebay

This is quite an investment if you wanted to build it yourself. Therefore the easiest way to provide this capability is through a website like ebay. Its free to register as a business, and you get access to ebay's user-base, and a secure payments capability through PayPal. You then deliver your products by post. Ebay takes a listing fee and sale fee (based on sale price), and Paypal takes a percentage of the amount it processes too.

Ebay Stores

The next step is to open an ebay store, which requires a regular fee (starts at £15/month). This gives you your own online storefront which is customised to your business' brand, and your own ebay shop web address (eg stores.ebay.co.uk/yourstorename). You also get various tools for marketing, tracking etc.

Online Marketing

You could write the best website possible for your business, but if you don't drive traffic through it, you won't generate value from it. So the question is, what's the best way to attract the right sort of people to your site?

Google

Most people will go to google as a first port of call, so you need to make sure that i) your pagerank is good and ii) your website is associated with the words that people will type in when they need the services/products that you provide.

Yell.com

The second port of call will probably be the online yellow pages (yell.com). You need a listing here, and preferably a link to your website.

Online Advertising

Other websites that attract your target demographic often sell advertising space. This is often done through third parties. Two of these are DoubleClick and Google AdSense.

Google AdSense

The Google model is to allow web publishers to offer ad space on their websites. On the other side of things, marketers provide their adverts to AdSense and associate them with keywords. By reading websites to understand what they're about, AdSense can work out which adverts are the most appropriate to put on each website. Then if somebody clicks through to an marketer's website, the marketer pays Google and the web publisher that provided the ad space a small fee. You can monitor your campaigns through online Google tools.

Google AdWords

When somebody performs a search on Google, if your site is associated with those keywords, you get a sponsored link on the right of the search results. You pay for click-throughs.

I've recently tried Google AdWords and AdSense to promote RS Motorbike Paint, but the click-through rates have been poor, but that might be due to the fact that the site is SEO'd and appears at the top of Google search results

DoubleClick

DoubleClick has recently been acquired by Google, and is a leading provider of online advertising services and solutions.

Embed Flash

A neat way to embed Flash gracefully: http://blog.deconcept.com/swfobject/swfobject.html

Accessibility and Screen Readers

Firefox screenreader emulator http://sourceforge.net/projects/fangs/

Greybox and Lightbox

Popups are outdated

Popups were always rubbish and annoying, they took you out of a flow, you had little control over them, you can miss them when they pop up behind another window. And now, because of their security problems, broswers block them. And because they need javascript or target="_new" , they aren't accessible. So when you've got a bit of information that you need to show, but its not part of the main flow, how do you do it? And how do you do it accessibly?

Lightbox

Lightbox uses unobstrusive JavaScript to display images outside the main layout of your web page, on a layer above. Degrades to a link to the page if you don't have JavaScript enabled. Smaller version of this is LiteBox

Greybox

Similar to Lightbox, but it displays any content - like whole web pages. Greybox.

Thickbox

A more complex version. See demo. I'm not keen on the way that the layer scrolls jerkily to remain central to your browser viewing window.

Other examples

• Hoverbox
• Suckerfish dropdowns
• Suckerfish Hoverlight
• Suckerfish Hoverlight Redux

Ajax

Combining these techniques with Ajax, and adding everything to your site in an unobtrusive way, and giving fallback functionality, is a really powerful way to have an accessible site with great in-line add-on features.

Redbox

• Redbox
• MoodalBox
• SlimBox

My displayBox

• Motorcycle paint website with my inline popup code displayBox on the products and information pages

YouTube

Encoding for youtube

I use Apple's iMovie to create my videos, and then I export them to a DVD image (.img) file. I use MagicISO to extract this file and product a .VOB file (amongst others). You can take this .VOB file and encode it using SUPER, a windows application which uses ffmpeg to encode the video to MPEG4/mp3, which is the recommended format for uploading to YouTube.

YouTube decodes and re-encodes your file once its uploaded, so it makes sense to get the settings as close to theirs as possible, for smallest filesize and best conversion quality. I use the following settings:
video: MPEG4/DivX, 320x240, 30frame/sec, bitrate: 350kbps
audio: MP3, sampling freq: 22050, 1 channel (mono), bitrate: 64kbps

My YouTube Channel.

Box Model

The Box Model

The box model defines how browsers lay out their pages, using their height, width, padding, margin and border. The standards-compliant ("standards mode") way is to take the height and width, and add the padding and borders onto these values. So a box with a width and height of 100px and a padding of 50px would have an overall height and width of 300px. This is how it is defined in the W3C standards, and how all browsers do it apart from Internet Explorer when running in "quirks mode" (ie backwards compatible, non-standards). IE includes the padding and border within the width and height. This difference means that you have to provide CSS hacks so that elements are the same size in IE quirks and standards-browsers.

However, the situation has just been rectified, and also got more complicated. IE7 now adheres to the W3C standards box model. IE6 almost adheres to the W3C standards when it is in standards mode, but not in quirks mode. The mode that it uses to lay out a page is dependent on the DOCTYPE. Pre-IE6 browsers use the quirks layout mode for all DOCTYPEs.

Layout mode used in Internet Explorer 6 based on Doctype

Doctype	Url in Doctype?	Xml Declaration?	Layout Mode
HTML 4.01 Strict	No	No	Standards
HTML 4.01 Transitional	No	No	Quirks
HTML 4.01 Strict	Yes	No	Standards
HTML 4.01 Transitional	Yes	No	Standards
XHTML 1.0 Strict	Yes	No	Standards
XHTML 1.0 Transitional	Yes	No	Standards
XHTML 1.0 Strict	Yes	Yes	Quirks
XHTML 1.0 Transitional	Yes	Yes	Quirks

See here for full list.

To get round the box-model inconsistencies, we use CSS hacks that take advantage of browser bugs or differences in CSS support to target different browsers. A common way to differenciate IE from standards-browsers is to use the !important declaration in your CSS. This tells all standards-browsers not to override this value - but IE doesn't understand !important, so you can override the value on the line below and it is picked up by IE only. In IE7 beta2, they had fixed the box model, but not the !important bug. This meant that the CSS hack compensated for a bug that no longer existed. Fortunately, in the first full release of IE7, this situation has been remedied, and !important is now recognised, and therefore the hacks still work as they recognise IE7 as a standards-compliant browser. Phew! I tested this in version 7.0.5730.11 and was extremely relieved. This just leaves IE6 in strict mode (ie non-quirks) as the problem - this will use standards based box model, but still has the !important bug.

References

• Box Model Hack
• Doctype Changing Layout Mode

Its a big month for browsers

Major Browser Upgrades

Its a big month for browsers, and we haven't seen anything like this before. The big two browsers vendors, Microsoft and Mozilla, have launched major new versions of their browsers virtually at the same time. Internet Explorer 7 and Firefox 2 are available now; but the really significant thing is that IE7 will be pushed to desktops via a Windows Update. Now that broadband is commonplace, the uptake of these browsers will be very rapid indeed. Previously, it used to take 6 months to a year for a new browser to take hold, now we can expect a significant uptake almost overnight.

Another significant point is that W3C standards will be better supported in IE7, and we can expect the number of bugs and inconsistencies between browsers to reduce as a consequence.

The Box Model

IE has always had a different (non-standard) box model to other browsers, but this has been put right for any document with an XHTML DOCTYPE. However, this may cause issues with IE6, because this uses the old box model for XHTML. Will the CSS hacks work?

Font Smoothing and Accessibility

One problem with producing fully accessible websites was that in Windows XP, ClearType font smoothing is turned off by default, and IE used the same setting as the OS. This meant that any large font sizes meant ragged, low quality-looking text on the majority of browsers. In IE7, ClearType font smoothing is turned on in the browser by default, regardless of the OS setting. This setting can be found in Tools>Internet Options>Advanced>Multimedia>Always use ClearType for HTML. This means that producing an accessible site will no longer mean that the typography will appear low quality, and therefore should enable a more accessible internet.

ClearType/Filter issue

Unfortunately, there is a bug regarding the use of DXTransforms filters with ClearTypeTo avoid this bug, IE7 disables ClearType for anything with a DXTransforms filter. This is rubbish, and makes pages that use filters look inconsistent. Maybe we should ditch DXTransforms filters now? However, it doesn't look like IE7 supports the CSS 'opacity' property, so how are we meant to get transparency in IE?

Printing

IE has always had problems with its printing, and rendering of print previews. IE7 promises better.

RSS

The new generation of browsers also provide for better out-of-the-box support for RSS (Really Simple Syndication), as this becomes an integral part of the web.

PNG image support

Currently, most websites use JPEG and GIF images. JPEG support 16 million colours, but no transparency. GIF images support 256 colours, and on/off transparency. Unfortunately, this means that you can't anti-alias into a transparent background using a GIF, which is a serious drawback. PNG images offer the best of both worlds, supporting 16 million colours and variable transparency, allowing each colour 256 levels of transparency. This opens up a whole new world of web design, especially when combined with CSS layers.

Firefox already supports PNG, but up to and including IE6, Internet Explorer didn't support the variable transparency feature of the PNG format. This has severely limited its use on the web, meaning that JPEGs and GIFs are still the dominant image formats on web pages. With IE7 now supporting PNG variable transparency, this probably marks the start of the shift from JPEG and GIF to PNG for images on the web.

Zoom

IE7 has added a Zoom feature to help with accessibility. Instead of just increasing the size of the font, and probably messing up the page layout, it takes a leaf out of Opera's approach and scales the whole page. This is a better experience for the user with poor eyesight, and also easier for the developer to cater for.

Tabs

Tabbed browsing has been available in Firefox for ages, but now IE7 has adopted a similar approach, and this will mean that users will get used to browsing in a consistent way, with multiple tabs within one browser window, rather than having many instances of IE open on the desktop. Better use of the favicon in the address bar, the tab heading and in the Favorites/Bookmarks makes it easier for a website to communicate its branding.

Current Statistics

Browser Usage Statistics 2006

Browser	Usage Oct 06
IE7	3.1%
IE6	54.5%
IE5	3.2%
Firefox 1.x	28.8%
Firefox 2.x	0%

When the figures are available for November and December, I predict that we'll see a significant shift to IE7 and Firefox 2 - but what will be the extent of this? It would be fantastic for front-end developers if the majority quickly migrate to IE7 and Firefox 2, as this will mean that all the hacks and workarounds to support old versions of browsers can be forgotten, and sites that are XHTML and CSS 2.0 standards-complient will look good and consistent for a majority of users. This should help the adoption of best practices and remove a burden from web development.

Filters in Internet Explorer

Fade Filter

One of the few IE-only features that I like are filters, and especially the fade transition filter. It just adds a bit more quality to the page, and degrades gracefully in other browsers.

Define the filter in your stylesheet:

div#filterElement { filter: progid:DXImageTransform.Microsoft.Fade(duration=2) height: 20px; width: 100px; background-color: blue; }

One gotcha is that you need to define a width and height for the filters to work. Then add the javascript to perform the transition:

function showDiv(divId) { var myDiv = document.getElementById(divId); myDiv.style.visibility='hidden'; myDiv.style.display='block'; if( myDiv.filters) { myDiv.filters[0].Apply(); } myDiv.style.visibility='visible'; if( myDiv.filters) { myDiv.filters[0].Play(); } }

Applying a filter effectively takes a snapshot of the element at that point in time. You then change its state behind the scenes, then Play() the transition, so in this case it blends between the state at Apply() and the state at Play(). Don't hide the element (display: none;) because doesn't display the element at all, and the transition is hidden from view. Using visibility: hidden keeps the element in place, but hides its contents.

Hiding the element is a bit more tricky, because the transition doesn't block the javascript, and so you hide the element immendiately after you start playing the transition, and the transition is hidden too. You therefore have to use the onfilterchange event on your element (IE only).

function hideDiv(myDiv) { if( myDiv.filters) { myDiv.filters[0].Apply(); } myDiv.style.visibility='hidden'; if( myDiv.filters) { myDiv.filters[0].Play(); } } function removeDiv(myDiv) { if( myDiv.style.visibility == 'hidden' ) { myDiv.style.display='none'; } }

Then, put the event on the element to remove the element from the page:

<div onclick="showDiv('filterElement')">Click to show</div> <div id="filterElement" onclick="hideDiv(this)" onfilterchange="removeDiv(this)">Click to hide</div>

Accessible Page Titles - sIFR

The problem

You want to have an accessible website. You want a website with seperate presentation code so that you can restyle it easily, and you can vary the presentation depending on the device that is viewing it. But above all, you want it to look great. You want your page titles to be in a really individual, high quality font. However, browsers only support a handful of standard fonts, and once these get to any size appropriate for a page heading, they get all ragged and blockey. You can set Windows to smooth the edges of fonts, but this isn't the default setting for XP. Most people will see text that looks very basic and unprofessional.

A common solution

A common solution is to replace the page title text with an image of the text, so that you can get the look you intended. However, this is inaccessible, impacts development time, inhibits rebranding and the ability to tailor your page to the device type, slows page load times and increases server load. You can generate the images on the fly, but this is a server overhead and also suffers from similar disadvantages.

The new solution

A far better solution is sIFR. It basically replaces the text on your page with a small flash movie. Most people have Flash, so most people will see the intended result. However, it degrades gracefully, and it they don't have Flash, they will see the original text in standard HTML. The HTML document is untouched, it is accessible, it doesn't impact development time and it can be rebranded easily. You can even have the text multi coloured.

More information

sIFR 2.0 can be downloaded here, and more information can be found on the sIFR Wiki. A huge library of fonts in swf format is available here.

Quick tutorial

I found the wiki and other tutorials didn't really make it clear how simple the whole thing was. So here's my cut down version:

1. Download and unzip sIFR 2.0.
2. Copy the following files to the same location as your webpage: sIFR-screen.css, sIFR-print.css, sifr.js, *.swf.
3. Reference these files in your web page, in the header, eg: <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" /> <script src="sifr.js" type="text/javascript"></script>
4. Add this bit of javascript just before the closing body tag: <script> if(typeof sIFR=="function") { sIFR.replaceElement("h1", "tradegothic.swf", "#ffffff", null, null, null, 0, 0, 0, 0, null, null, "transparent"); } </script>

Now your page title, within the h1 tag will be rendered using sIFR. If you want the text within different tag replaced using sIFR, add another line with this tag name as the first argument.

Flash Videos

Introduction

With broadband and cheap hosting space available, it's now the norm to have videos on your website. Sites such as utube host videos for you. But how do you get your video directly onto your own website?

Video Formats

There are many different video formats available; for example MPEG, AVI, DivX and MOV. However, browsers don't support these formats themselves, so the video usually opens in another program such as WinAmp, RealPlayer or Windows Media Player. To allow browsers to run a video within the page, I find that streaming the video as a Flash movie is best.

Flash Movies

1. If your video is already on DVD, then rip it onto your PC's hard-drive. For this I used DVDDecrypter. This exports the video as an .IFO and a .VOB file. Otherwise, export the video from your video editing software (eg iMovie) as a DVD image file (.img) and use MagicISO to extract the .VOB file.
2. Use AutoGK to convert this to an .AVI format. The input file is the .IFO, and I left most settings at default, with a 75% quality. This gives you an .AVI file with an XviD codec which will be potentially hundreds of MB.
3. The final stage is to convert this .AVI file to a .FLV. Use Adobe (nee Macromedia) Flash 8 Video Encoder. You can download a trial version from Adobe. You can also use the free Riva FLV Encoder.

Add Video to Web Page

Now you will need a flash-based video player. The best one I found was this one. Then upload the SWF files to your webserver, and add the following code to your html:

<object type="application/x-shockwave-flash" width="320" height="261" wmode="transparent" data="flvplayer.swf?file=video.flv&autoStart=false"> <param name="movie" value="flvplayer.swf?file=video.flv&autoStart=false" /> <param name="wmode" value="transparent" /> </object>

The height is 261 rather than 240 to allow for the control bar at the bottom of the movie. The flvplayer.swf is the name of the flash player, and the name of the movie (in this case video.flv) to play is passed to it. Put these files in the same directory on your webserver, and you should be good to go.

Publishing Photos

Publishing Photos

The best free software for publishing photos to your website is JAlbum.