Tech Musings

Old School with iFrames and Tables

Sorry Grandad, frames and tables - you're having a laugh aren't you? Before you abandon this post for been just soooo 1990s I only want to clear up a few things related to our old (friends!) frames and tables. Lately, and somewhat unbelievable, I have seen references to these technologies as layout techniques - noooooooo! You should have left these technologies behind with the Spice Girls. That said beyond layouts there are cases where you can be justified in using them.

You've Been Framed

Firstly frames. Reviled by designers for looking awful, detested by Marketeers for terrible SEO and pilloried for lack of accessibility, as I say these should be long forgotten. However, I would venture to say that they have tended to linger (like a fart in a spacesuit) in the murky world of backend content management systems - Blackboard or Sharepoint anybody. That said they have been formally removed from the HTML5 specification so it would be hoped that the days are numbered for these last few outposts.

There does remain one frame technology however that is in the W3C specification and has a very healthy usage. I am talking here about iframes. An iframe provides a convenient window through a page to other content. First introduced by Internet Explorer the iframe element creates an inline frame. This produces a window through a page to another HTML page. The iframe content can be changed by linking to the iframe using the target attribute of the anchor tag.

If you have ever embedded a Youtube video you will have used iframes. Youtube's code is like this:

<iframe width="560" height="315" src="http://www.youtube.com/embed/KUDjRZ30SNo" frameborder="0" allowfullscreen>
</iframe>

The attributes required for an iframe are all pretty obvious. Dimensions are set by width and height. The URL of the page to appear in the iframe is provided in the src attribute. The name attribute allows the iframe to be targeted in links. And the frameborder attribute controls a border around the iframe. A value of 1 switches the border on, a value of 0 will remove the border.

He is the code above with the lovely frameborder set to 1.

Trendy Tables

What of tables? Everywhere you look in the real world tables are used as a brilliant way of displaying data. And that is what you should use them for in a web page. Absolutely NOT for the layout of the page. Why not layout? Because the HTML is overly heavy, inflexible and semantically wrong.

By default HTML tables aren't that pretty but CSS can do its presentational sparkle on them easily enough. I am pretty sad and love nothing more than a nice looking table.

Yuck Table

The following table has its border attribute set to 1.

<table border="1">
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

Not very pretty. So here are my top 5 table styling tricks.

1. Remove Old HTML

Remove all HTML attributes from your table like border, cellpadding and cellspacing. You can then add padding to all table cells via td and th as you see fit.

td, th{
    padding:10px;
}
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

Also apply background colours as you would with any other element ie:

table{
    background-color:#ffffff;
}

2. Table Headers

Use <th> elements for your table headers. Better semantics. These will be bold and centred by default but we can change that with CSS. The following CSS rule will change the style of the <th>s.

th{
   text-align:left;
   font-weight:normal;
   background-color:#BAC0AC;
}
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

3. Use the CSS property border-collapse

Use the CSS property border-collapse. This may seem strangely named but by setting the value to collapse it allows you to overrule the messy table borders set with HTML attributes and replace them with your own lovely CSS ones.

Add a CSS rule to target your table, setting border-collapse to collapse. Then apply a new border with CSS for example:

table.mydata{
    border-collapse:collapse;
    /* my new border style */
    border:1px solid #C24704;
}

This would result in a table like:

Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

Other options include adding borders to rows via the tr.

tr{
    border:1px solid #C24704;
}
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

We could also just have vertical borders by targeting the td with a rule to add left and right borders. You'll need to remove any borders added to the tr element for this.

td{
	border-left:1px solid #f00;
	border-right:1px solid #f00;
}
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

4. Align cell content with text-align and vertical-align

When placing content in cells use CSS text-align to align text horizontally and vertical-align to align text vertically ie:

td{
    border:1px solid #f00;
    text-align:center;
    vertical-align:top;
}
text-align
Key values left, right and center.
vertical-align
Key values of top, bottom, or middle.

Use text-align and vertical-align over the likes of HTML td and tr attributes align and valign.

The table below uses text-align and vertical-align to align the table cell content.

Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

5. Use CSS3 tricks like nth selectors

If you fancy dabbling in a bit of CSS3 you could use nth selectors to stripe the rows.

tr:nth-of-type(even){
    background-color:#FFCF5A;;
}

This CSS3 selector will only target 'even' rows. You can target 'odd' rows as well.

Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

If you need to support older browser the same trick can be achieved with jQuery by creating a suitable class and adding to only 'odd' or 'even' rows.

$("tr:odd").addClass('alt');

Finally what about a lovely CSS3 box-shadow.

   box-shadow:4px 4px 4px #555;
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

Now that's better.

The Position on Position

In my 20/20 CSS properties to learn and love I didn't include 'position'. So what is the position on position? The odd thing with position is that despite its name you can do an awful lot of layout positioning without it. Lots of web designers, and indeed frameworks like the 960 grid, solved the layout issue without recourse to position but instead rely on float (float your boat here). Float itself relies on something called 'normal flow' and it is normal flow that really lies at the core of an understanding of 'position'.

Normal Flow

With all these references to CSS properties it is important to remember that your HTML Structure is very important - it dictates what is called 'normal flow'.

Normal Flow

Normal flow is the order in which the HTML elements would be displayed without any CSS interference. Block elements like <p>, <h1> and <div>, when in the normal flow, appear top to bottom. That is elements higher in the code go at the top, ones that follow go after them. Inline elements like <a>, <img> and <span>, when in normal flow, appear left to right. So content you add after other inline content is placed to the right of it.

Normal flow is kinda common sense when you think about it. When you open a new document in a word processor - the cursor is blinking away in the top left corner. Paragraphs follow one after another down the page and text flows left to right.

Tip: Remember the CSS display property can be used to change the default display type of an element ie make a block <li> behave as if it is an inline element.

Position Absolute

The most likely position value you will come across is 'position:absolute'. This value removes the targeted element from the normal flow of the document. As such its position in the document is no longer impacted by other elements. This has the effect of letting the absolutely positioned element float (lets not use that word), sit or layer on top of the other elements in the page.

If more than one element is positioned absolutely then the z-index property can be used to stack the elements on top of each other like a pack of cards, or like layers in Photoshop (one for you crazy Graphic Designers out there). The higher the z-index the higher the element is in the stack. When no z-index property is provided then normal flow comes back into play in that the last element 'in' sits on top of the stack. If you think about it that makes perfect sense as content lower down the normal flow is rendered by the browser after content before it - so ends up on top.

When positioning something absolutely the CSS properties 'top', 'bottom', 'left' and 'right' can be used to place the element a given value from the chosen margin ie top:100px would see the element placed 100px from the top of the page.

One last thought on absolute positioning. When something is positioned absolutely the top, bottom, left and right values are 'relative' to any (non static) positioned parent. What, run that by me again? If you nest a <div> within a <div> and the first is given a top property value of 10px and the nested <div> a top property value of 20px - then the nested <div> is 30 pixels from the top of the document. We could describe this as 'relative' to its parent - BUT THIS IS NOT relative positioning. We'll see what that is next.

View Demo

And another one last think - we often use position:absolute with some Javascript magic to create animations.

CodePen Demo

Position Relative

By setting the position property to the value 'relative' an element can then be repositioned using the top, bottom, left and right CSS properties. The element is moved relative to where it would appear in the normal flow. Unlike with absolute positioning the relatively positioned element stays in the normal flow.

Where would you use this?

You can use position relative to nudge content/offset it from its normal flow position. The word offset here has been set relatively with a bottom value of 5px so it appears above the line.

Another trick is to give a container element a relative position but no top, bottom, left or right values. This means the element stays exactly where it was. However, because it has a position property (admittedly doing nothing), nested elements inside the container can use position absolute 'relative' to the relatively positioned container.

To help grasp these concepts have a play in the position playground.

Hopefully you are getting a picture as to why float remains a popular first choice when laying out a page with CSS!

View Demo

Position Fixed

When an element has the position property fixed, you guessed it, it is fixed. When the page is scrolled the element remains fixed. Where it is fixed depends on the top, bottom, left or right property values assigned to the element. In actual fact 'fixed' is very similar to 'absolute' in that the element is removed from normal flow thus allowing other content to be scrolled underneath it. This trick is often used to create permanent headers and footers that can be placed above the other content of the page.

Warning: If you are unlucky enough to have to support IE6 then sorry position:fixed is not supported.

View Demo

Position Static

Before we get onto some new goodies we must not forget position:static. This is the default value for position. It is the value that an element will have if no position property is set. And as you now appreciate that means it will appear in the normal flow.

When would you use position static?

If this is the default why would you ever set it. Good question. Well you may need this if in your wiz bang Javascript you are messing about with the position property and want to, for example, put an absolutely positioned element back into the normal flow.

The Future Sound of Layout

With CSS3 there are new tools coming to help out us poor web designers. Look out for the multi-column module with the likes of column-count, column-width and column-gap to make column design easier.

Also we will one day be able to use something called 'FlexBox' with its flex-grow, flex-shrink and flex-basis. Good old float will also find itself under siege from the likes of display:grid, grid-columns and grid-rows.

Finally the position property may get a new property 'center'. Centring content horizontally and vertically with CSS is somewhat counter intuitive at the moment, but 'center' promises to do it in one fabulous piece of CSS wizardry. Keyword here - promises. It appears in the W3C CSS3 spec but I haven't yet seen it working in a browser.

The future's so bright I've got to set opacity to 75%.

Position Properties Summary

Property Effect
absolute Removed from normal flow. Has z-index and top, bottom, left and right properties used to place absolutely where required.
relative Element placed with reference to top, bottom, left or right properties relative to where it would normally appear.
Fixed Element fixed in position. Does not move from given top, bottom, left or right properties.
Static Element returned to the normal flow.
center Not yet with us but is supposed to centre the element horizontally and vertically within its parent.

Mozilla Throw in Towel on H.264?

In January 2011 Google caused a storm in a tea cup when they stated their intention to remove H.264 video support from their implementation of the HTML5 <video> tag.

But that doesn't seemed to have happened.

At the same time Mozilla stated their support for open standards - OGG and WebM - as opposed to the royalty encumbered H.264.

So we had Google and Firefox on the one side, and on the other H.264 licence holders Apple and Microsoft.

But now Google's open source ally seems to be weakening its stance. The onslaught of H.264 is leaving Firefox out in the cold whereas Google still haven't dropped H.264 from Chrome.

So just as Firefox is feeling left out in the Webkit-vendor-prefix saga - it is poor Firefox that takes the flank. Firefox is obviously getting tired of playing the odd man out, trying to stick to open source principles, but with a business eye on the realities of what developers are actually using. That Google don't put their money were they mouth is and pull H.264 support from -webkit based Chrome must be especially galling at Mozilla Towers.

Can't say I blame Firefox for looking at H.264. Come 2016 when the H.264 license is revisited by MPEG-LA, this does potentially leave us at the mercy of Apple and Microsoft. But, hey that's nothing new in this game.

ps I thought it timely to repost my test videos so we can see the current state of play.

Video Test Zone

To keep a track of video support, here are examples of the major players.

H.264 - in this case a 12mb mp4

If you can't see anything above your browser doesn't support HTML5 video with H.264

H.264 - in this case a 4mb mp4

If you can't see anything above your browser doesn't support HTML5 video with H.264

H.264 - in this case a 1.6mb mp4

If you can't see anything above your browser doesn't support HTML5 video with H.264

H.264 - in this case another 8mb mp4

If you can't see anything above your browser doesn't support HTML5 video with H.264

Ogg

If you can't see anything above your browser doesn't support HTML5 video with OGG

WebM

If you can't see anything above your browser doesn't support HTML5 video with WEBM

More on HTML5 Video.

Flash Player Retrenches

Adobe P P P Piss Off a Penguin

With Flash it was supposed to be build once play anywhere. But having lost the Flash Player on mobile it looks like Linux users are next in line - at least in terms of a comprehensive service.

I was at the London Flash Platform User Group's event this week where Flash superheros Lee Brimelow and Mike Chambers were present to discuss the future of Flash. It was Mike's unenviable task to introduce Adobe's White Paper Roadmap for the Flash Player that was announced the previous day (22 February 2012).

Now I have been to my fair share of Adobe events over the years, doing right back to the Macromedia days, but this was something different. Gone were the whoops and continual references to awesomeness, in was a humble recognition, at least in the context of the mobile announcement, that in the words of Mike Chambers, 'Adobe f**ked up'.

So what of the Flash Player Roadmap? Adobe have been working with Google on a project called "PPAPI" or "Pepper" a new API for hosting plugins. The bottom line is that this will be included in Chrome later this year and for Linux users will become the only way to get the Flash PLayer as a Linux Flash Player will no longer be available as a direct download from Adobe.

There are caveats here, ie a debug player will still be available and the Linux version of Flash 11.2 will be supported for another 5 years, and I know there aren't masses of Linux users out there, but this seems to follow a general backing away from the 'play anywhere' philosophy that once made Flash so ... erm awesome.

Gaming and Premium Video

The Flash Player Roadmap recognises that after years of browser doldrums, in recent years the browser market has been revolutionised by the efforts of Firefox, Webkit and johnny come lately IE9. The opportunities the browser doldrums offered the Flash Player are no longer relevant as the holy trinity of HTML5, CSS3 and Javascript do some serious territorial pissing.

So Adobe are retrenching the Flash Player. It is now focused on Gaming and Premium Video.

Lee Brimelow spoke about some new features coming to the Flash Player, such as disabling the right-click context menu and thus allowing it to capture events and improves to Hardware-accelerated graphics, that are clearly useful to gamers.

There was little talk about what Adobe means by 'Premium Video' at the event although the white paper does talk about benefits Flash has for DRM and analytics.

Gaming with Flash is still certainly streaks ahead of HTML5 technologies and I would have to say that my experience with HTML5 video has so far been less that thrilling - at least on the desktop (great on mobile!).

Mobile - The Third Way

That leads us to mobile. So the Flash Player has gone from mobile. Not going to lose to much sleep over that as it wasn't a very satisfactory experience and of course never going to be on the iOS. The message coming from both the event and the white paper seemed to be that retreating, retrenching, refocussing, however you want to term it, allows Adobe to "actively invest in enabling developers to create and deploy Flash based content as mobile (and desktop) applications via Adobe AIR".

That is the crumb of consolation I take away from all of this. If I am to keep using Flash Professional, and also teaching ActionScript, then I have to know where and what kind of content should be published. Games and Video for the desktop (not Linux) fine but I also want to package up native mobile apps for Android and iOS. For me this is a killer feature of Flash Professional. Who wants to learn Objective-C right? So why doesn't it appear as the 'third way' along side Gaming and Premium Video. Well, as the whole 'Thoughts on Flash' saga proved the problem for Adobe is that they are hostages to Apple, and indeed Google/Android, with this killer feature. It is outside their control and could all come horribly tumbling down as I am sure they all remember it did with the launch of Flash Professional CS5. My fingers however remained tightly crossed.

Adobe Edge ' Post Flash' Animations

Adobe Edge, available in beta, is a 'post Flash' animation tool. It generates animations constructed with web standards HTML5, CSS3 and Javascript (mainly piggy backing on jQuery).

The interface is very familiar to Adobe After Effects in terms of the timeline and property keyframes. In terms of functionality it has the lightweight options for adding text and basic shapes - though artwork can be imported as GIF, PNG, JPEG and SVG. If you have already dabbled with Adobe Muse and even Flash Catalyst you will have experienced these lightweight applications, almost 'app' like, compared to monsters like Photoshop and After Effects.

Very easy to use. This demo was knocked up in quarter of an hours playing. Some nice touches like the inclusion of a good range of 'ease' options but some simple features like animating opacity seemed to be missing.

Definitely potential for a tool that plugs the 'post-flash' gap and Adobe seem to have a number of strands running here as there is also the 'Wallerby' exporter that takes Flash Professional FLAs and converts them to 'HTML5'. Adobe, who were caught with their pants down when Steve Jobs gave 'HTML5' a huge boost with the iPad, are beginning to put together the tools we need in the 'post-flash' world.

Useful links

You can download the preview software here
http://labs.adobe.com/technologies/edge/

and see Wallaby here
http://labs.adobe.com/technologies/wallaby/

Adobe MAXing it Out

Loads of news coming out from Adobe this week as they hold their Annual Beanfeast MAX. There was the obligatory Photoshop pixel fairy magic.  The one that got people most excited appeared to be the 'deblur' tool.  Expect this to replace the Content Aware Fill as the killer Photoshop demo to wow your audience.

But beyond the gimmicky and the usual corporate hyperbole their is the distinct feeling that Adobe have rediscovered their mojo and our motoring forward (all be it sometimes via the chequebook) with some very interesting ideas.

Typekit

Adobe have acquired typekit. This I am sure will be give @fontface / web typography an all mighty boot up the backside. The days of the old web safe fonts looked numbered. Of course you could do this yourself through services liked the wonderful font squirrel but Adobe have the nack of making this kind of stuff easy.

I reakon we'll be seeing this integrated with Dreamweaver, Fireworks and the recently revealed Project Muse.  Designing web fonts directly into these Adobe products looks like a very slick idea and shows Adobe going all CSS3 on us.

Adobe Buys PhoneGap

Next up is another chequebook job.  Adobe have acquired PhoneGap.

Now very excited about this one.  PhoneGap, if you have missed it, is the open source tool that will take your lovely HTML5, CSS  and Javascript and package it up as an Android, Blackberry or IoS App.  Very cool.  I can see this been integrated into (again) Dreamweaver (CS5.5 already has jQuery Mobile) but also Flash.  That is Flash Professional, Flash Builder and Flash Catalyst - all development environments we associate with producing content for the Flash Player but which are been subtlely refocused as development environments that, yes do Flash Player SWFs, but also do other stuff too.

Then they announce a whole splash of tablet apps.  Coming to Android first but promised to be available on iPads by 2012 there are 6 apps known collectively as the Adobe Creative Cloud.  This are all very touchy feelie drawing / inspiration / mood board type apps.  Expect a flurry of handdrawn style content as designers get their grubby little hands (and of course fingers) on these new creative tools.  I am feeling all flowly and floaty just thinking about it.

Could we be witnessing the emerging shape of a Post-Flash Adobe.

BBC Homepage Beta - No Rounded Corners Shock

Always fun to see what Auntie Beeb will come up with their redesigns. The Beta site makes use of jQuery to place a very large carousel in what is a very boxy design. They have gone for a 976px width for the main content but no responsive design.

The Beeb Luuuve the iPad

They luuuve the iPad at the BBC.  My new favourite game is count the number of iPads you can spot during Spooks.  So we can reasonably expect a good experience for the new design on the lauded tablet, and apart from the carousel been a bit clunky the layout itself is very iPad friendly.

Landscape on the iPad the fold appears just below the carousel.

BBC landscape on iPad

Whilst in portrait mode the front page fits perfectly displaying the second tier of content.

BBC Portrait on iPad

No New Shiny Toys

But what no rounded corners! Not very CSS3 .... and it uses XHTML strict. Very noughies.

Ten More Techie Terms

Following on from my Ten Techie Terms post here are some more jargon busting goodies.

1. Web Standards

Web Standards represents the holy grail for web designers/developers.  Essentially as web designers/developers we build web pages with a profusion of technologies.   The fruit of this hard labour is then viewed in a whole cacophony of environments.  Some kind of standardization to make this process less stressful is the goal of the web standards movement.  That is, to give web professionals a range of standardized, open technologies that can be used for the production of web content.  Key web standard technologies are HTML, CSS and Javascript.  A key organisation in the development of web standards is the World Wide Web Consortium commonly referred to as the W3C.

Comment: The W3C are not the be all and end all of web standards and have often found themselves reacting to developments rather than leading them.

2. Client Side Technologies

Client Side Technologies run on the .. er .. client. Yep, great so what is the client.  Lots of computing involves a client -> server relationship.  This takes the form of the server as a host for information.  The client requests information from this server.  In web technologies the server is a web server that hosts a web site and the client is the web browser used to request pages from the host/server.  Web browsers such as Chrome, Firefox, Internet Explorer, Opera and Safari are all classified as client side technologies.  Now the thing with client is that are all different.  We may have 'web standards' but each of these clients has its own interpretation of these standards.  In recent years adherence to web standards has improved dramatically but be careful you still need to do lots of client side testing of your client side technologies.

Therefore client side technologies are those that run in the client ie browser.    Those client side technologies are mainly involved in the display of the information retrieved from the server and they are the 'Big Three' of web technologies HTML, CSS and Javascript.

3. Server Side Technologies

So if client side technologies run in the client then, you guessed it, server side technologies run on the server.  That is your web server.  Web servers can have software installed on them as well as the server software itself.  These are known as server side technologies.  Most commonly these are used for producing content on the fly from databases.  That is using a backend database to provide the data used to construct the web pages.  To interrogate a database numerous server side technologies are available.  ASP.NET is a Microsoft technology, Coldfusion an Adobe technology and PHP an open source technology all of which pretty much do the same thing - query a database to retrieve data that is used as the content in a web page.  When looking for web hosting you will need to consider which server side technology you wish to use.  Given host packages are available including different server side technologies.  For example, a common host package is to offer PHP as the server side script and MySQL as the database back end.  This combination is so common that PHP/MySQL often appears as one long acronym whereas these are actually two unrelated technologies.

Tip:  You may well have noticed that all web pages don't have HTML file extensions.  We also have ASPX, PHP, CFM, JSP to name but a few.  These are all examples of server side scripts.  View source in your browser won't reveal any of the server side code as the processing is of course done on the server side.

4. SQL

Like John Travolta SQL has been around since the 1970s.  SQL stands for Structured Query Language and is a language used to create and query relational databases.  When you arrive at the point in your web development career that you need a database, it is in all likelihood to be a relational database that supports SQL such as MySQL, Microsoft's SQLServer or Oracle.  Therefore you will find yourself with another language to learn.  The good news is that SQL is relatively straight forward, some would say, almost verbatim in syntax.  When you set off to build your first PHP/ MySQL website get some SQL under your belt first.  W3Schools offer a good starting point.

Tip:  Pronounce SQL as "es queue elle" not as "see qwell".  Well that is my opinion anyway.

5. HTML5

Number 5 has got to be HTML5.  HTML5 is often used a catch all for the new generation of web standards technologies namely HTML5, CSS3 and Javascript (via some neat frameworks).  HTML requires a 'modern' browser such as IE9 or newer version of Chrome, Firefox, Opera or Safari.  HTML5 represents a not so quiet revolution in web technologies as it offers a whole new range of possibilities to designers and developers.  See the MustBeBuilt HTML5 section for some examples.  A headline feature of HTML5 is plugin-less video and audio something that previously required browser plugins such as Adobe Flash Player.

6. Browser Plugins

Plugins baby.  Browser plugins represent software used to extend the functionality of a browser.  This could be to play video such as QuickTime or to play games such as Adobe Flash.  Adobe's Flash Player is probably the most widely installed plugin.  The Flash plugin is commonly used for banner ads, video and games delivered through the web browser.  It is found on most users desktops but is notably missing from Apples IOS (iPhones, iPod, iPads) as I discuss here, there and everywhere.  The Flash Player is a free download from the Adobe site.  To create Flash content Adobe sell various applications such as Flash Professional, Flash Builder and Flash Catalyst.  Many other Adobe products such as InDesign, Photoshop and Bridge also have options for outputting content in the SWF format needed by the Flash Player.  Flash is regarded as a proprietary technology - ie it belongs to Adobe and is not part of an open standard like HTML, CSS, Javascript and the rest.  Many things previously the almost exclusive realm of Flash such as animations and video are now possible with HTML5 technologies - see above.

7. CMS - Content Management Systems

WordPress, Joomla, Drupal are all examples of Content Management Systems. These are browser based frontends that update and add web site content by managing a database behind the site.  This site is running WordPress.  WordPress is itself running on PHP and MySQL.  WordPress is the most popular of the CMS/Blogging softwares available with a billion trillion installs probably (citation needed).  Joking aside it is used for humble sites like this right through to behemoths like CNN.

8. Cookies

The cause of a storm in a tea cup when they first appeared cookies are designed to overcome 'statelessness'.  Cookies allow a web server to send back a little bit of information to be stored in the client/browser.  This helps the browser maintain state - ie know whether the user has logged in, know what is in their shopping cart.  Cookies can be created by developers with a range of technologies including old favourites like Javascript and PHP.  Cookies have recently been in the news as the EEC has passed rules that restrict the type of data that can be stored in cookies.  This is aimed at restricting a web site's ability to track the browsing habits of site visitors.

9.  Bitmap

Bitmap is an image file format.  A bitmap is literally a map of bits or pixels that make up an image.  Zoom in on any image saved from the web and you will start to see the pixel bricks that make up that image.

A Bitmap close up

Examples of bitmaps are JPEGS, PNG, GIF, TIFF and BMP.

10. Vectors

Images can also be created electronically using vector technologies. Here instead of mapping out all those pixels, mathematics is used to draw shapes. Particularly good for lines, curves and simple shapes. Vectors are resolution independent meaning they scale without becoming pixelated.

Feel the Quality of the Vector Curves

When a vectors and bitmaps is created for use on a computer screen, it uses what is known as RGB colours.  That is Red, Green and Blue. RGB colours are what we use to create colours to be viewed through a screen. As opposed to CMYK which is used to create colours for print - CMYK stands for Cyan, Magenta, Yellow and Black (K for Black so not to be confused with B for Blue)

Google Deprecate Maps API for Flash

Google have announced on their Geo Developers Blog that they are deprecated support for the Flash based Maps API.   They claim this is so they can focus more resources on the JavaScript Maps API v3.

The Flash API was introduced back in 2008 when Flash was probably at its peak.  The decline of Flash, is in my mind, linked to one device in particular.  It seems very coincidental that the iPhone was in first released in June 2007.  It was the iPhone that was in the vanguard of Flashless web content followed more ravishingly by the iPad which first appeared in April 2010.

Is this another nail in the coffin of Flash based content?  In a previous post I bemoaned the lack of Flash on the iPad with reference to live streaming.  There are certainly somethings that Flash does brilliantly well of which live streaming is an example.  But, I think we have to assume that the Google announcement is not welcome news at Adobe.  Yet again, the once dominant Flash is moving down the pecking order.  Despite Google's statement that they remain committed to the Flash platform on both Android and in Chrome, the Flash Player is just not the multi-platform, multi-content delivery system it was back in 2008.

As a Flash developer myself, who has used the Google Flash API, I would say to others fear not.  Those hard won Actionscript skills transfer very nicely to Javascript.   They are both ECMAScripts, and if there is one permanent in this business it is change.