19

How do I convert Flash web applications to HTML 5?

  1. What is the recommended workflow to learn HTML5? What tools should I install? What SDK? Where to start? How to test? How to debug? What do I read?

  2. I'm familiar with Eclipse, should I install Aptana? If yes, what's next? I would like to start lightweight but I would also like to learn the good practices from the beginning.

UPDATE: I understand that what is often labelled as "HTML5 development" is in fact a mixture of HTML, CSS, JS and more, however I don't believe that bigger projects are developed in Notepad. That is why I am asking you to reveal your tips and tricks about your workflow.

30

HTML5 is not a single integrated thing. It's a collection of extensions to HTML, some of which are widely-implemented and can be used safely, some of which no-one implements yet, and a whole lot in-between. If you try to treat HTML5 as a coherent single development platform and ?learn it all? you will have a really difficult time.

Instead what you need to learn is the web as a whole: basic HTML, CSS, JavaScript, the Core DOM, the HTML DOM, the basic Browser Object Model. Then you can add features of the New Web as and where you need them, and browser support allows: HTML5 extensions, CSS3 properties, canvas drawing, websockets, the other DOM and BOM extensions spun off from the HTML5 work...

The feature set of the web is constantly evolving and there is not one single point of reference. W3Schools (which is nothing to do with W3C incidentally) tries, but it's chock-full of errors. Don't trust what it says as gospel.

You may need to refer to the definitive HTML4, CSS2. DOM Core and DOM HTML specs to make sure. You will also probably want to look at MDC's DOM reference and MSDN's DOM reference for what Firefox and IE support. The HTML5 spec contains a lot of more up-to-date DOM stuff too, as well as the new HTML extensions, but it is a long and unwieldy document, quite hard to use even by the standards of standards documents. Although not nearly as bad as the impenetrable ECMAScript spec. (Thankfully you will probably be familiar with a lot of that already if you're used to working with ActionScript.)

You don't need an SDK or IDE to develop HTML/CSS/JS. You can use an IDE if you like, but I'm quite happy doing everything in my favourite text editor. There are no build/compile steps to worry about, you just save your file and hit reload, job done. Most modern web browsers have a debugger and other development tools either built in (eg IE8) or readily available as extensions (eg Firebug).

22 accepted

If I were to start a new html5 project from scratch right now I would probably do something like this:

Download and use the HTML5 Boilerplate. This will give you a fresh page with most of the important things initialized and ready for testing. Also includes some nice debugging features you should be using along with firebug

Look over Dive in to HTML5 to see the history and usage of the code.

On my mac I use Coda, and at work I use Dreamweaver in Code view. They aren't going to build the page for you, but code completion, hinting and color coding work well. I'm sure Aptana and the like offer great features, but I've always found simpler to be better when it comes to html.

Defintiely pick up the HTML5 and CSS3 books from "A Book Apart" (CSS3 comes out later this month)

And finally - to try and figure out this whole thing check out:

Opera Developer Network - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Canvas Cheat Sheet - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

How to draw with HTML5 Canvas http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

7

I highly recommend WebStorm, from JetBrains (or any of their IntelliJ based products, like PHPStorm, RubyMine, PyCharm as they all support HTML). You get CSS, HTML auto completion and live (while you type) checking for correctness. Refactoring support for Javascript (something I haven't seen anywhere else), and even the ability to debug Javascript in the IDE (if Firebug or the Chrome Developer tools are lacking for you). It has project support as well as SVN, Git, Perforce and CVS support. And a ton of other features, highly recommended...

5

Several invaluable tools

  • FireBug - developer plugin for Firefox. Allows to debug JS, HTML, Styles.
  • IE Developer toolbar for older versions of IE (6,7). Not much HTML5 there though. New IE has F12 tool.
  • Chrome has it's developer tools

Those tools are mostly for Javascript debugging and to figure things out regarding elements positioning and applied CSS styles.

4

If you're looking for an IDE recommendation, Eclipse is pretty good. If you're looking for Javascript tools, Firebug is great for debugging.

However, you really don't need any "tools". I think the notion that "bigger projects can't be/aren't developed in Notepad" is, quite simply, false. I use Notepad++ to write all of my HTML/CSS/Javascript and I think this is a very common approach-- even for professional web designers. Notepad++ has syntax highlighting for HTML, CSS, and Javascript, as well as auto completion. If you want software that offers more than that, please be specific in which features are important to you. (BTW, if you're a mac user, try BBEdit).

Larger sites are often written with frameworks such as Django or Ruby on Rails, but that really has nothing to do with using or learning HTML5.

3

I believe Adobe (the creators of Flash) are actually in the process of releasing a Flash to HTML5 conversion tool, which may be worth your while looking into.

http://news.softpedia.com/news/Adobe-Showcases-Flash-to-HTML5-Converter-163709.shtml

Effectively then, Flash becomes a tool for developing HTML5.

And as of this week, Microsoft have announced that they're going in a similar direction with Silverlight, so it looks like everything is going HTML5 now.

The one question I have is how good the HTML5 code generated by these two tools will be? We won't know the answer to that until they're actually released, but I've never found generated code to be particularly good quality. Hopefully we won't end up with the modern equivalent of MS Front Page.

3

I would highly recommend setting up a build system for your Javascript code, and having it check against JSLint every build. I have found this picks up a lot of errors early on and promotes good coding (play with the options if it is too strict). Look at jQuery's build system on GitHub for a good example.

Other than that for editing I am a big fan of Notepad++ as I have yet to find an IDE that provides useful features without a whole load of bloat and GUI trickery.

You could look at the latest Dreamweaver though, the code editor isn't bad and they have a widget gallery with a number of HTML5 widgets you can just drop in.

2

"I don't believe that bigger projects can be/are developed in Notepad"
You'd be wrong there :p Long-time Notepad user, and I think it's the best way to go. For debugging, I use IE's Developer Tools, Firefox's FireBug, and Chrome's Inpector.

As far as HTML5 goes, it's basically just regular HTML with a few extra toys. Besides, there's nothing stopping you from declaring an HTML5 document, then only using things that are in older versions of HTML.

One thing I would recommend avoiding at all costs is programs like Dreamweaver. They make things look easy with graphical designing tools, but when you want to do your own stuff it gets very hard very fast (I'm looking at the other students on the course I'm doing when I say this)