In a flash class recently I was asked which technologies some one needs to be aware of and competent with when dealing with web design. In answer I quickly knocked a simple ideas chart to showcase which web technologies you need to know, and also some notes about where things are/were and where they are going…

Which web technologies

Which web technologies

The big thing of course is html5 and Flash. As you can see from the diagram, everything Flash can do (broadly speaking) can be done in HTML5, with the caveat that HTML5 covers CSS3/JavaScript/HTML5 and things like WebGL.

 

With the advent of HTML5 and CSS3, it is possible to create lovely animations using these technologies, along with JavaScript. The problem is though, you basically have to hand code everything. There is, as yet, no application that gives you a graphical interface (á la Flash) that allows you to drag and drop items, animate them just choosing options from a menu, and so on.

 

With the advent of HTML5, Flash CS5, and all the brouhaha about them both I thought I would jot down my thoughts on the matter. This post is about Flash CS5 and HTML5, it is not about Flash CS5 vs HTML5.

First though, here is a précis of developments…

Adobe have recently also brought out an HTML5 pack for Illustrator and for Dreamweaver.

Apple have reversed their decision to disallow Flash CS5 apps compiled into iApps onto the iTunes store (although the iPhone and iPad still do not have a flash player).

 

Hot on the heels of an HTML5 pack for Dreamweaver, comes an HTML5 pack for Illustrator…

http://labs.adobe.com/technologies/illustrator_html5/

…however Illustrator has been able to output its work to the web for a while, particularly using SVG, so I thought I would do a little experiment and see how Illustrator outputs to SVG.

When you create some artwork you now have several choices in getting that artwork onto a web page. You can…

illustrator export

illustrator export

File > Export > canvas (html)

File > Export > png

 

We recently had an email from somebody asking us why were launching an HTML5 course when it’s not even supported properly in all the browsers. It’s an interesting question which I thought was worth answering here as well.

For what must be 12 months now we have been getting requests for HTML5 courses, and have been pushing back on the grounds that “the technology isn’t ready yet”. Having said that we now feel that if you are building internal apps where you can dictate the browser, or are using specific features which do have good support, then there is no reason why you can’t start getting to grips with HTML5.

 

With everyone talking about HTML5, CSS3, JavaScript, etc I thought it would be a good idea to put together some simple cheat sheets regarding HTML5, CSS3 and JQuery.

They are by no means exhaustive – and they are not meant to be. They are just simple sheets indicating some basic elements, with a  few examples thrown in. I plan to use these in future courses, and over time I might expand upon them, but I thought it would be useful for people to get a simple overview of what these topics are about.

 

What can HTML5 and CSS do? Here are a list of HTML5/CSS3 experiments that I have come across. Have a look, they are great fun.

A solar system…

http://neography.com/experiment/circles/solarsystem/

Blowing up video…

http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/

Leopard style stack example…

http://gordonbrander.com/lab/css3-stacks/#stack

Harmony…

http://mrdoob.com/projects/harmony/#shaded

Fishtank…

http://gregmurray.org/fish/

Canvas molecules…

http://alteredqualia.com/canvasmol/

As I find new ones I will post them, but if anyone knows of any others, let me know and I will add them to the list.

Did you like this? Share it:
 

Again, a new standard, HTML5, being worked on, but not finalised yet. And again, some browsers are starting to use some of the new HTML5 commands.

I have not tried them yet (but I plan to), but here is a short list of browsers/links to help you get started…

Browsers that have started implementing HTMl5

Chrome

Firefox 3.5

Opera

Safari

Useful HTML5 links

w3.org HTML5 spec

safari features

alistapart.com HTML5 article

websites using html5

Did you like this? Share it:

Google Adwords

© 2011 The Highlander Blog Suffusion theme by Sayontan Sinha