I thought that hell would have frozen over long before I ever blog about a Microsoft product, let alone Internet Explorer, let alone looking forward to it, but here I am - blogging about Internet Explorer 9, the latest soon-to-be-released version of Internet Explorer.

Even though the much improved Internet Explorer 8 was only released over a year ago in March 2009, Microsoft are already hard at work (and not too far off releasing) version 9 of their controversial browser application. You can even download the latest preview of the browser from their test drive microsite.

It was also announced that the first official beta of Internet Explorer 9 will be launched on September 15th 2010, that's just 3 weeks away from today.

Having just switched to Google Chrome after years of being a Firefox fanboy, there is no worries of me jumping ship to Internet Explorer as my browser of choice anytime soon. However, the main reason for my excitement is the possibilities it opens up when developing websites.

Though we hate to admit it, Internet Explorer is probably one of the most influential browsers in terms of the technologies we decide to build our websites in. Due to the large market share, we have to make sure that what we build is compatible. This meant that using exciting new technologies such as CSS3, and HTML5 was not as possible as the more standards compliant and frequently updated browsers like Mozilla Firefox, Google Chrome and Opera.

As of the fourth preview release, Internet Explorer has surprisingly good support for CSS3 selectors (43 out of 43) and properties, scores 93/100 on the Acid3 test – a much higher score than the 20/100 IE8 receives, a faster JavaScript engine and supports new HTML5 tags such as <video> and <header>.

With the end of Internet Explorer 6 coming more of a reality day by day, we are likely to see a big surge in people upgrading and therefore allow us to use these new technologies which the latest browsers are now supporting.

As an industry we are steaming forward into a more standardised playing field, meaning our web designers and developers are happier and the web will become a much more competitive and exciting venture.

As designers who code and developers, we like to shout about writing semantic HTML as a standard in our work, but a lot of the time we then get asked "What does Semantic HTML actually mean?"

In short, it means the HTML tags we use imply meaning to the content, rather than presentation. This in affect means our HTML is cleaner, easier to understand, more accessible for screen readers, and should no custom CSS be applied to the document – the content is still readable in the manner it was intended.

Some examples of these would be using: <p> tags for our paragraphs of text; <address> for, you guessed it, an address; <h1>, <h2>, <h3> for headings and sub-headings – increasing the number as the heading decreases in the page's hierarchy.

When writing semantic HTML, we also tend to use <em> and <strong> tags rather than <i> and <b>. Earlier we stated we want to use HTML tags which imply content, not presentation. In this case <em> and <strong> imply that the content should be emphasised and have strong meaning, whereas if we were to use <i> and <b>, they are a presentational instruction for the content to be italicised and bolded – which can just as easily be done through CSS, further separating visual style from content.

The above are just a small handful of the tags we can use, and with the continuing development of HTML5 we are seeing even more tags created to make our templates even more semantic, removing the need of copious amounts of <div> tags (a <div> being just a container, implying no meaning to its content).

Headings and SEO

On the topic of semantic HTML, the conversation about the use of headings and its impact on the SEO (Search Engine Optimization) of a page is often raised – and one tag which causes confusion and a plethora of opinions, is the <h1> tag.

The <h1> tag is intended for the most important heading on the page. Most of the time designers and developers wrap the site title and/or logo in the <h1> tag as they deem this piece of information as the most important. However some SEO specialists disagree, and would rather the current page's or blog post's title should be within the <h1> as this holds the most weight about the information that is on the page. So who is right and who is wrong?The answer is there is no right or wrong way, and there is a lot of grey area, just personal preference and different SEO strategies – hence the reason for difference in opinions and implementations.

Personally, I agree that the page title should be in the <h1>, and the site title should then be within a link to the site's homepage.

But what about the home page, that doesn't necessarily have a title? After a recent discussion with other developers we came up with a simple solution. This solution can also be found in the recently released Twenty-Ten default theme for WordPress 3.0.

On the home page, the most important heading on the page is the site title, correct? Well on this page, we wrap the site title and/or logo within a <h1> tag, giving it the highest priority on the page in terms of structure, and search engines will recognise this.

When moving onto a subsequent page, the <h1> tag will then be used for the page title as discussed earlier, and the site title will then be wrapped with a link.

This might require a bit more code from the server side point of view, but the result is a lot more efficient for your semantic HTML, and it will definitely make SEO consultants and specialists happy.

Following on from my previous article on git source control, I’ll now take a look at a few solutions for the other side of development : Database structure

There are 2 sides to most development projects.  The code, be that business logic, UI or reports is easily  via a variety of solutions (SVN, CVS, git, VSS, etc)

The other side of the coin is that of the database.  Most applications will consume some form of data in their operation.  While some may rely on external services to provide this, most will have some form of local storage to store all the elements necessary for it to function.  Many site will have space for user logins, product information, shopping baskets, news, events, documentation, the list is endless

In the same vein as development, the data stores usually starts as a small collection of tables.  As functionality in the codebase grows, so does the number of tables needed to store all the different types of data that are being coded for.  So, as developers make changes to their sections of code and can commit their changes to a repository, what is there on the database side?  How does one track changes and additions to tables and stored procedures?

It’s definitely something that is becoming more of a necessity in these days of incremental release.  Traditionally, a new database would have to be created in it’s entirety. Not really a problem for development database that are used prior to release.  The development code can be expected to be quite fluid and changes are expected to occur frequently.  Once that database has been released to production, this becomes impossible.  Customers are very reluctant to lose historic data, user tracking relies upon it.  In this case, changes can be made piecemeal and scripts generated to map the single changes to other instances of the database

Fine if you’re using the DEV>UAT>Production strategy.  A single setup coordinator can orchestrate the script from a developer and apply that to the UAT database.  When the QA team are happy that the changes are working, this same script can then be applied to the production database, preserving existing data

However, when development becomes more distributed that a single developer and single production database, things start getting a little trickier to manage.  Sending scripts around becomes impossible.  People might not have the very latest build so scripts that rely on a series of changes will fail

This is where a central source control solution come in.  There are tools for applying these single change in order so that dependencies can be tracked.  Red gate have a fantastic tool which integrates natively with SVN so map changes, and there are some other really usable open-source tools available which can target more databases, but with more of an onus on developer collaboration to make the changes in sequence

Red gate's tool integrates only with SqlServer but is a valuable addition to their Sql toolbelt set of tools.  I’ve been using them for years and can’t fault them for mapping changes to production databases.  Their latest tool is no exception.  It works as an addition to the Sql Management Studio which ships with SqlServer.  Extra tool menus allow you to attach a database to an SVN repository.  Once linked, the tool will make an initial snapshot of it’s structure.  Then each change is managed within the tool, allowing the developer to commit them one by one as they are made.  When another developer needs to get a copy of the development database, they only have to make an empty database, link that to the central repository and the tool then maps the tables and stored procedures across, including any dependencies that are found.  The new developer can also make changes to their database, commit these one by one and the original developer will see these as updates and can apply them to their database.  The process can be scaled up in much the same way as regular development source control  solutions.  Distributed developers are given access to the repository and off they go

The open source solution I’ve looked at closely is deltaSql.  This employs a custom server for mapping changes which runs on Apache, making it cross platform compatible with Windows or Linux.  It uses a similar commit and update strategy but pulling the individual scripts from it’s central server instead of SVN.  This solution also allows for more databases to be catalogued, including mySQL and postgreSQL and Oracle.  Lit integrates into the Eclipse IDE via asset of open source windows so is totally free to use

Both solutions provide a lightweight method of mapping changes from a distributed set of users to a central location over multiple database solutions.  Source control is essential for most projects and databases should be no different.  They are, in some cases, more complex than the code that drives them, so being able to sync the change with your peers is an absolute necessity.  Throw in a few QA houses, production databases and data warehousing solutions and the "Drop and Reload" method is not going to work out.  Both offering provide a less painful way to make structure changes in a controlled manner and provide a means to roll these changes back and start again should testing prove unsuccessful.  Very powerful!

For many designers and front-end developers, another hot topic of conversation is the @font-face CSS declarations which now allow us to use any font we like in our websites as if it was installed on the users computer.

Before we were restricted in which fonts we could use, relying solely on the fonts which most users would have installed on their computers; Arial, Verdana, Times New Roman, Courier New – to name just a few.

Now we can upload the required font files to our server, reference them in our CSS and we are all set.

I bet I know what you are thinking – what about browser support? It goes without saying that everything we do is affected in someway or another by the browser support of the features we want to use. The good news is that @font-face is currently supported by all major browsers: Firefox 3.5+, Chrome 4+, Safari 3.2+, Opera 10.1+, even Internet Explorer 6+.

But hang on, isn't Internet Explorer 6 (IE6) over 10 years old? Yes it is, and even though @font-face is officially a new declaration within CSS3, it was originally planned for CSS2 and therefore was implemented by IE6 – when it came to @font-face being removed from the spec (for reasons I am not quite sure of), support was never removed from IE6.

For more information on the code required and how to create a bulletproof @font-face declaration which is cross-browser, check out Paul Irish's article on 'Bulletproof @font-face syntax'.

However, though in theory @font-face allows us to use any font we like – we are restricted by the font's licenses whether font embedding or sharing is permitted. This is mainly down to the fact that if we are linking to a font file in our code, it means anybody can just download the font and then is it on their computer.

Therefore, it is important to check if the font you want to use is permitted to be used on the web.

Alternatively, there are a few resources which I have come across and found extremely useful in getting @font-face fonts and making sure they are permitted to be used.

• Font Squirrel

  The Font Squirrel website lists 'hundreds of @font-face font kits' which are 100% free for commercial use. The kits provide all the necessary fonts and code needed to be implemented.

• Fontspring

  If you wish to have even more of a selection of font, and have a more unique feel to your website - Fontspring provides purchasable fonts along with @font-face licenses, all very reasonable prices.

• FontDeck

  Whereas the last 2 services allowed you to select individual fonts, and in the case of FontSpring, purchase @font-face licenses, FontDeck allows you to pay a subscription and have full access to their library of fonts to use on your website. Great alternative if you want to use a lot of fonts, or as a freelancer you love to use unique fonts for all your clients' websites.

• TypeKit

  Like FontDeck, TypeKit allows you to pay a monthly subscription allowing access to their library of fonts and use them on your website. The higher level your account type is, the more fonts you can use and the more website domains you can use the fonts on.

So when you are next designing a website, or even as a client looking to have a website designed, look into the possibility of using more custom fonts to get more aesthetics and edge on the web. Stand out, be at the forefront of new technologies and trends.

SVN’s time at the forefront of source control may be coming to an end.  There’s a newer, quicker, lighter and more flexible solution : GIT

From the worlds most famous open source developer, Linus Torvalds, it’s the latest and greatest way of working with collaborative projects alongside developer from all corners of the globe.  Linus is the developer who started work on the Linux kernel way back in 1991. He inspired the world with his ‘hobby operating system’ and changed the way software of this type can be developed. Collaboration between disparate developers flourished and, as the project gained steam, more and more developers from around the world were chipping in and sharing code with each other via SVN.

SVN (short for Subversion) holds a distinct image of code files at certain intervals called revisions.  Every time a change is made, a new revision is created and the old image is archived.  Archiving is required so that any changes which are made that are found to be incomplete or flawed cam be rolled back and started again.

This does happen quite frequently in open source projects.  While the amount of code generated in open source projects can be voluminous, the quality of it is assessed be public committee which may or may not agree with the developers logic and/or coding style.  So, changes are frequently rejected or submitted for further revision before being appied to the main development files which would then be compiled into the next release

However, consider the facts.  The Linux kernel currently consists of 13,320,934 lines of code split out over many thousands of files.  In order for these to be compiled, a version for each one of those files is held in many hundreds of thousands of states. A developer might only changes one word in one line of a file, but the whole file is taken as a revision and stored in the archive, ready to be rolled back at a moments notice. SVN was becoming cumbersome by design

So, Linus himself developed a new way of mapping just the changes to a file, rather then the entire file.  This makes for much smaller databases which can be updated in a much smaller timeframe than is possible with SVN.  GIT still has the concept of a central location for the main files, called a repository.  Developers can be given access to the files over the web and the files can be downloaded in their entirety.  This is where the similarity to SVN ends though.  The act of downloading the files creates another mini-repository local to the developer.  Changes made to any of the files are made and can be compared to his or her local repository, which allows for local rollbacks and updates before being uploaded back to the central repository. 

The uploading is magical. The files are tracked by the developer’s local repository and small sets of “deltas” are created, mapping out the lines of code which have been added/edited/deleted so these deltas can be applied to the central repository, without the need to upload the whole file, which can be many thousands of lines long.  The beauty of GIT is in it’s delta and merging capabilities.  It’s internal merger is of such great quality that manual merging of files (comparing them side-by-side and manually selecting the lines from each file that should be kept) are, almost, a thing of the past. 

The repository itself has some great features for developers to peer review between themselves before submitting them for a central review.  Paired programming can be of great benefit in stopping those nasty bugs getting in and ruining a good commit. 

The learning curve for GIT can be a bit overwhelming when coming from an SVN background, but you wouldn’t expect anything else from the world leader in geekonomics.  The commands are all written in the shell rather than using any form of drag & drop based system utilised in windows, makes perfect sense though since 99.999% of Linux programming is done in the terminal with no icons or windows in sight!!

In our designer vs developer nights out, we took a trip to Riley’s Snooker hall in Reading for a bit of doubles snooker. The teams were made up from the Technical and Design teams and our new ‘New Business’ Guru Rob Jennings

Being used to Pool, we found Snooker quite a challenge to start with being that the tables are four times the size!! After a few pints the balls were flowing on (and off) the table. Not top class by any means however. A highest break of 14 throughout the whole night but it’s a tough game to play

Attendees were

• Dax
• Simon
• Craig
• Rob de la Jennings
• Nat
• Binu
• Tun
• Tim

You wait all year for something to happen then three things happen at once!!!!

To kick off the release of Visual Studio 2010, .net framework 4 and Silverlight 4, Microsoft hosted an array of global events inviting developers and technical professionals. Some of the world’s finest speakers showed off the new products, with Microsoft programmers highlighting new features and tools.

Visual Studio 2010 is the latest tool from Microsoft to aid programmers in the creation of Windows Applications, data services, web sites, Silverlight applications and windows phone 7 applications.  The productivity tool has caught up with modern technology to offer multi-monitor support. There is now enhanced integration with existing Microsoft Office products, intellisense, for the jQuery library, and other open-source products. It also offers the ability to target .net framework 4 as well as previous versions of the framework. It even colour codes the oldest of ASP scripts for you die-hard VBScript heads!!

.Net framework 4 is the new framework for developing on the Windows platform.  The installer itself offers many more templates for creating your programs, including one which targets the yet-to-be-released Windows 7 Phone. One of these phones was on display during the event and the speaker made a simple program for organising contacts, calling into the Outlook program in the office suite, getting the user’s contact list and offering filters to re-organise the emails, phones numbers and other data items in the account. The framework is all about rapid development and .net 4 certainly seemed to deliver in the demos.

Silverlight 4 is the next generation of the fledgling RIA (Rich Internet Application) framework from Microsoft.  Building on Microsoft’s proven track record of solid data layer and fantastic base tools, Silverlight itself was intended as a business-class framework to compete with flash in the RIA space.  What had let it down in the past was highly restricted security stopping the development of business application.  Silverlight 4 overcomes this with a new security layer allowing a user to opt-in to certain security-restricted features such as printer support and webcam and microphone.

 The framework is merging more and more with Microsoft’s other rich application framework, WPF, so the lines between internet application and desktop application are becoming blurred. Indeed, a Silverlight 4 application can be downloaded from a website, installed to a desktop application and run as if it was a fully trusted application with access to your local files and network services.  Sounds scary? Well there are a fair few hoops to jump through to get this working but it only speaks volumes for Microsoft’s security-conscious values and not wanting to cause headache for even the least savvy of users.

There were plenty of other cool demonstrations of products like Blend 4, Windows Azure and Bing Maps, more to follow next time...

It’s time to blow the dust off this blog and announce some rather exciting news for Creative Jar. Previously this year, Creative Jar launched Phase 1 of Cranfield School of Management's new website and was received with huge success. Recently, as part of the second phase, we were required to build a powerful search tool for the website much like Google – a scary comparison, but a challenge Creative Jar set out to achieve.

 

 

Your average search tool consists of a keyword search which displays a generic list of results relating to your search term. Leaving users to flick through link by link for what they were searching. However, the SOM Search uses your search term and returns results in an array of categories; images, videos, documents, website sections.

Directly from this results landing page, the user can watch videos, play audio files and read snippets of content. Alternatively, the user can select to view your standard results page if they wish to do so.

 

 

All of this is powered using Cranfield's custom CMS, giving the client full control over their content and their search... a powerful tool for any website – and very exciting for use techies to build!

Check it out and find out for yourself by visiting the Cranfield website!

 

We have been working with a client who has a Google Search Box installed in their website. http://www.google.com/enterprise/search/index.html

The guys lucky enough to have been working with this technology are loving it. Digging deep into XSLT - we think we have provided one of the strongest search solutions available on the internet (for an internal search engine).

Stay posted - this isn't live yet.

In the meantime, anyone contemplating adding a search tool to their website should be looking at this. It's enterprise level, so not cheap, but you get what you pay for. And this is awesome! 

 

 

I am currently in the process of packing up my belongings to move house - and let's face it, you inevitably will find stuff which you had misplaced about 6 years ago behind a book or in a box deep within your cupboard. One thing I did find was a box of untouched floppy discs and it got me thinking: when was the last time I used a floppy disc? With CD's, DVD's, Memory Sticks and External Hard Drives polluting every computer users repository for file storage, floppy disc's don't even get a look in.

So with the 'fate of floppy discs becoming apparent' what will happen to the Floppy Disc Save icon that we see on every computer application that has saving functionality? Will it be modernized to suit the advancing technologies that we now use to store our files? Or will it be standardized as one of those all-time-favourites that just don't need changing? Well I did a bit of googling on the matter, as you do, and found this interesting discussion: Modernizing the Save Icon?

You will find a few comic jokes thrown in here and there but some very valid points are raised about why should we both touching something which has become such a standard?

"Quick, off the top of your head, what does a red octagon with a white outline represent? How about a button on a GUI that looks like a pair of scissors? What about a red circle with a red line across it from the lower left to the upper right? A button on the corner of a screen window that has an X in it? Do *any* of these things actually look like the object or process that they
represent? Does it matter?

A good icon is simple, visually distinctive, easy to recognize instantly, consistent across many interfaces. The floppy disk icon for save is all of these things, and it's also familiar to almost every experienced computer user. It could be simplified a little (removing some superfluous details, like the label and the little readonly-lock thingydo), but the basic visual is already
quite simple and distinctive. Nobody's going to mistake it for (say) the paste button. Sure, it's an anachronism, but the standard icons for cutting and pasting are scissors and paste, respectively, and nobody's used *that* method of cutting and pasting since word processing came into vogue. So what? The icons are visually distinctive enough (well, the scissors are; they should
probably have used a roll of transparent tape for paste, but it's too late to change that now) and their meaning is well established."

I think the above nailed the point really: an icon is something which is easy to recognize instantly, consistent and requires no thought. Just because the technologies that we use nowadays look different and are structured differently physically doesn't mean functionally they do not have the same purpose - to save your current file