Awesome HTML5 Drawing Program

[lilo777]

Why wait for iPad?

This is an HTML5 drawing application. It is awesome. I can't wait to use this with the iPad.

http://mugtug.com/sketchpad/

People were able to use similar applications on desktops, laptops, tablets and now netbooks for decades. If anything iPad will suck at it (small screen, slow processor, slow GPU) . What exactly are you going to draw with your finger on it?

 

[CPD_1]

People were able to use similar applications on desktops, laptops, tablets and now netbooks for decades. If anything iPad will suck at it (small screen, slow processor, slow GPU) . What exactly are you going to draw with your finger on it?

You're missing the point (and being a wonderful little ray of sunshine at the same time). It's one thing to have this level of interaction in a native application, and to have it run as smoothly as it does. It's something else entirely to have it as a browser based application. If anything, it would probably run really well on the iPad, considering that it doesn't seem to be all that processor intensive.

As for what one might draw in it, I'm assuming you are being a smart aleck and implying that finger's are too clumsy an instrument for making anything of value in a graphic program. I present to you this article: http://www.newyorker.com/online/blogs/tny/2009/05/jorge-colombo-iphone-cover.html.

 

[EssentialParado]

That is your opinion of course.

It is abour Rich content when we are talking about the performance on an Ipad.

http://code.edspencer.net/Bean/index.html

This example which uses HTML 5 eats 30% of my 3 Ghz cpu on my Imac. On the Iphone it is pretty much dead with a photo update once every couple of seconds. The cpu was maxed out because HTML 5 is still a scripting language just like Flash. So for those people that mainly hate Flash for hogging the cpu are not going to see much difference with HTML 5. The only problem is that it may be much harder to turn off HTML 5 compared to Flash. I am all for turning off Flash if it helps your performance but I as of yet do not know of anyway to turn off portions of the canvas in HTML 5.

Ah, I was wondering what HTML 5 site you were using that lagged your computer, thanks for posting the link.

Now, you do realize that's coded in javascript and nowhere near a HTML 5 site? The HTML 5 method would be to use CSS 3 animations, not heavy javascript.

Try this 3D demo in your iPhone (or the latest webkit build*), which uses CSS transformations— http://webkit.org/blog/386/3d-transforms/

^ For that to run on my 1st gen iPod touch at full speed is suitably impressive, and really proves the power of HTML 5.

* 3D transforms not updated into latest version of desktop Safari yet, but exist in the iPhone and iPad. Not sure about Chrome or Firefox.

 

[smetvid]

Ah, I was wondering what HTML 5 site you were using that lagged your computer, thanks for posting the link.

Now, you do realize that's coded in javascript and nowhere near a HTML 5 site? The HTML 5 method would be to use CSS 3 animations, not heavy javascript.

Try this 3D demo in your iPhone (or the latest webkit build*), which uses CSS transformations— http://webkit.org/blog/386/3d-transforms/

^ For that to run on my 1st gen iPod touch at full speed is suitably impressive, and really proves the power of HTML 5.

* 3D transforms not updated into latest version of desktop Safari yet, but exist in the iPhone and iPad. Not sure about Chrome or Firefox.

Ok so javascript with HTML 5 = bad and CSS 3 with the canvas = good. so then why have javascript with HTML 5 if it is that slow? For me it is actually slower then Flash. Does CSS 3 work on any other browser right now other then Safari? I noticed it doesn't work in Firefox.

I really think there is going to be a small level of confusion out there of what format people should use. A lot of people could end up using javascript with HTML 5 and that would make the sites perform pretty bad. If and when CSS3 gets finished I hope it is pretty clear to the world that they should use it instead of Javascript. A lot of the cnavas demos I have seen do in fact use javascript so it seems to be pretty popular at the moment. Anybody know when CSS3 is going to be 100% finished? Unfortunately in the corporate world I cannot start using it until I know a large number of my clients who sadly use IE and usually older versions of IE will be able to view the content.

 

[EssentialParado]

CSS 3 should be used for any 'transforms', but it can't perform calculations. Javascript is still needed for that. Javascript can be efficient though, when used appropriately. But in the example page you linked to, I don't think it was used appropriately, and the proper course for the author would've been for most of that to be done using CSS.

As for javascript itself, the biggest area browsers are currently fighting over is who has the fastest javascript engine. It started with Safari, went to Firefox, and then Chrome. I'm not sure who's fastest right now, but javascript engines got incredibly faster and more efficient in the past year, and I think they'll get even better in the next year. — I think this shows a big advantage over Flash, as has been pointed out, because javascript is open source, the browsers can compete over the fastest native implementation of it, but this sort of thing just doesn't happen with Flash, because it's all down to Adobe how efficient (or inefficient) their Flash support is.

 

[smetvid]

I can tell you that example played a bit smoother and used a bit less cpu with Safari compared to Firefox.

So CSS3 seems more like the visual animation portion of Flash (without the GUI of course) while javascript the actionscript portion of course. Now if somebody would just make a visual application to do this then the transition could start. I can tell you that my students wouldn't mind using CSS 3 and HTML 5/javascript if they had a visual tool to do so. In fact I really hope Adobe just ports the shell of Flash to compile CSS 3 and javascript content. Then every designer in the world that uses Flash wouldn't really care what the outcome is. We really don't care what language the final product has as long as it can do the same stuff. Most of us have no real love for actionscript and I personally would have no problem using a design application that just exported a set of HTML 5, javascript and CSS 3 files. Remember most of us designers are not really tied to Flash the plugin or actionscript the language but Flash the design application.

So what are we supposed to do with all of our PC clients that use IE 6 and IE 7 and IE 8? I feel Flash will still be around as long as IE doesn't support HTML 5 and CSS 3. Even when IE 9 comes out there is only a small sliver of the corporate world that will use it. I guess I will just have to continue to use Flash until HTML 5/CSS 3 matures a bit more.

 

[Runt888]

The cpu was maxed out because HTML 5 is still a scripting language just like Flash. So for those people that mainly hate Flash for hogging the cpu are not going to see much difference with HTML 5. The only problem is that it may be much harder to turn off HTML 5 compared to Flash. I am all for turning off Flash if it helps your performance but I as of yet do not know of anyway to turn off portions of the canvas in HTML 5.

Wow...so many things wrong in one paragraph.

Neither HTML 5 nor Flash are scripting languages. Both have the ability to embed scripting languages, but don't require them to function.

HTML 5 is much faster than flash - this isn't something that can be disputed. It's possible to write a bunch of javascript that performs slower than the flash equivalent, but as EssentialParado points out, browsers are currently duking it out to see who has the best javascript performance. The increases in javascript speeds in the latest versions of the major browsers are incredible, and only possible because javascript is an open standard. Relying on Adobe to speed up flash obviously hasn't worked out very well.

As for turning off portions of the canvas in html 5, it's very easy to turn off specific tags, and browsers would have no trouble implementing this if it ends up being necessary.

 

[Zorn]

This is so true.

Why do 99.99% of all restaurant sites suck hard.

I had someone the other day ask me to print of a menu for fricking Jack in the Box.

I had to tell them it was not really feasible given they have a stupid menu made with a stupid plug in...

Web developers who don't understand how and why people use their websites are horrible and should all be fired tomorrow. Unfortunately there are a lot of them. Fortunately it would likely open up jobs for capable people.

Websites should not be made to "be cool" or having spinning, worthless and bloated graphics. They should be there to provide information and if possible present advertising or whatever other means they use to make an income.

Google actual weighs the speed a site loads at for both search engine ad rankings and organic search rankings. I hope they take extra points off for sites that use flash.

Google is big on the user experience, so it won't be long before people who rely on flash and not the fundamental tools of html, css and the rest are going to get punished even more and become even less relevant.

No competent web designer needs flash or any plug in to develop their site. They are tools for the lazy or incompetent.

Exactly. Flash sucks hard. Every time I go to a website for a company or restaurant and get some obnoxious sound playing and watch a loading bar for Flash I usually go somewhere else. It's annoying and unnecessarily wastes my time. Everything I have seen using HTML5 looks better and runs much better - someone needs to take Flash out behind the shed and put it out of its misery.

 

[EssentialParado]

So what are we supposed to do with all of our PC clients that use IE 6

If Google — the biggest website on the planet — can lose IE6 support, I'm pretty sure most of us also can. We can't jump through hoops to support every old and incompatible browser forever.

As Google are also doing, it's possible us other web designers can prompt IE 6 users to download the Google Chrome frame plugin for IE. It's the same way Flash managed to spread so fast; "just quickly download this plugin to view this website."

Although I do think you have a point. I think HTML 5 will first propagate technology and gaming websites, where the users are primarily on modern browsers, but business websites may need to be dual HTML 5 / Flash for a while.

In terms of development, specifically what actual tools and features would you need to be created for HTML 5 ?

 

[smetvid]

Wow...so many things wrong in one paragraph.

Neither HTML 5 nor Flash are scripting languages. Both have the ability to embed scripting languages, but don't require them to function.

HTML 5 is much faster than flash - this isn't something that can be disputed. It's possible to write a bunch of javascript that performs slower than the flash equivalent, but as EssentialParado points out, browsers are currently duking it out to see who has the best javascript performance. The increases in javascript speeds in the latest versions of the major browsers are incredible, and only possible because javascript is an open standard. Relying on Adobe to speed up flash obviously hasn't worked out very well.

As for turning off portions of the canvas in html 5, it's very easy to turn off specific tags, and browsers would have no trouble implementing this if it ends up being necessary.

Javascript is a scripting langauge. It is not machine code but interpolated at runtime. It also depends on how it is used. I have seen javascript examples that I can make with Flash that use much less cpu. We are not talking video here but graphic translations. Perhaps javascript eventually can be executed through the browser faster then Flash does it and that is great but right now it is hit or miss. Some functions are faster and some are slower. In the example I showed I can make it in Flash run at a smooth 60 frames per second on my same system and it uses up to 14% of the cpu. I would call that slightly faster then the HTML 5/javascript example above.

CSS 3 on the other hand does look like it runs much faster then actionscript and Flash which is great.

However until we see some actual benchmark testing please do not tell me my whole paragraph is wrong unless you can back it up with direct benchmark comparisons.

 

[smetvid]

If Google — the biggest website on the planet — can lose IE6 support, I'm pretty sure most of us also can. We can't jump through hoops to support every old and incompatible browser forever.

As Google are also doing, it's possible us other web designers can prompt IE 6 users to download the Google Chrome frame plugin for IE. It's the same way Flash managed to spread so fast; "just quickly download this plugin to view this website."

Although I do think you have a point. I think HTML 5 will first propagate technology and gaming websites, where the users are primarily on modern browsers, but business websites may need to be dual HTML 5 / Flash for a while.

In terms of development, specifically what actual tools and features would you need to be created for HTML 5 ?

Well the biggest thing for us is live video streaming with dynamic and multicast video streaming. We currently have to use Flash for some clients due to the great live video streaming that is a protected video stream for sensitive security subjects. We also have to use Silverlight which I hate but Silverlight has amazing video streaming for financial companies that have pretty bad bandwidth for thousands of employs. The smooth streaming with Silverlight and dynamic streaming with Flash will swap live video streams on the fly based on the users bandwidth. Multicast which should be coming to Flash as well in a few months is super critical if a company wants to stream a live meeting to all of it's employs and there is limited bandwidth. Sadly the world still is not on very fast network speeds and this is not going to change any time soon. We have to use technology that allows us to shoehorn live video into these bandwidths. Now of course live video streaming isn't a need for everybody but it is a need for us. Now with that said Flash CS5 should allow us to make a native Iphone app that can stream live video from the Flash Media Server. It is my assumption that Hulu is currently on the private beta for CS5 which is why they may now make a Iphone app for Hulu. The timing is too much of a coincidence. This however doesn't help us with everybody else that doesn't use a Iphone or Ipad so we will still have to use Flash and Silverlight until an open source HTML alternative can be invented. There is promise of moving live streaming to HTTP but it has too many security holes right now for any of our clients to even consider it.

 

[Runt888]

Javascript is a scripting langauge. It is not machine code but interpolated at runtime. It also depends on how it is used. I have seen javascript examples that I can make with Flash that use much less cpu. We are not talking video here but graphic translations. Perhaps javascript eventually can be executed through the browser faster then Flash does it and that is great but right now it is hit or miss. Some functions are faster and some are slower. In the example I showed I can make it in Flash run at a smooth 60 frames per second on my same system and it uses up to 14% of the cpu. I would call that slightly faster then the HTML 5/javascript example above.

CSS 3 on the other hand does look like it runs much faster then actionscript and Flash which is great.

However until we see some actual benchmark testing please do not tell me my whole paragraph is wrong unless you can back it up with direct benchmark comparisons.

Javascript is a scripting language - but you said HTML 5 and Flash were scripting languages, which is just wrong.

As for benchmarks, it's very rare to see the exact same site coded using HTML 5 and Flash - generally developers will pick one or the other. Therefore true comparison benchmarks are going to be few and far between, especially this early on. Youtube, the only site that I know about to use both, has shown that using HTML 5 to display video is much faster that using flash, even when the source video is identical. Sample CSS animations, which is the preferred way to do a lot of the things that javascript is used for now, has also been shown to be very fast, without the overhead of loading a flash plugin.

But the whole point is that javascript is open, so many different groups can work on improving its performance. The site you posted could run 4 times as fast next year, with no additional work on the part of the site's developer.

 

[dlewis23]

So what are we supposed to do with all of our PC clients that use IE 6 and IE 7 and IE 8?

There really isn't much you can do about 7 & 8, as most things will work properly in it with little to no modification.

But IE6 is a different story. Developers need to just simply say **** you. No more IE6. Put a small portion of code in that when a user goes to the site with IE6 have it put up a message that just says upgrade your browser and give a list of new browsers.

If enough sites (And the big ones) did that IE6 would be gone in a month. But because people continue to fix things for IE6, its just making it stick around longer.

I stopped fixing major things in IE6 on my sites a few months ago. The site will function in IE6, but does not have everything that IE7 and higher would have. It also doesn't look as good because I stopped fixing transparent images for IE6.

 

[smetvid]

There really isn't much you can do about 7 & 8, as most things will work properly in it with little to no modification.

But IE6 is a different story. Developers need to just simply say **** you. No more IE6. Put a small portion of code in that when a user goes to the site with IE6 have it put up a message that just says upgrade your browser and give a list of new browsers.

If enough sites (And the big ones) did that IE6 would be gone in a month. But because people continue to fix things for IE6, its just making it stick around longer.

I stopped fixing major things in IE6 on my sites a few months ago. The site will function in IE6, but does not have everything that IE7 and higher would have. It also doesn't look as good because I stopped fixing transparent images for IE6.

I was under the impression that IE 7 and IE 8 did not support HTML 5 or CSS 3 yet. Maybe they support a few parts but not all of it. IE 9 is the first version of IE expected to have wider support for HTML 5. At least this my understanding.

 

[smetvid]

Javascript is a scripting language - but you said HTML 5 and Flash were scripting languages, which is just wrong.

As for benchmarks, it's very rare to see the exact same site coded using HTML 5 and Flash - generally developers will pick one or the other. Therefore true comparison benchmarks are going to be few and far between, especially this early on. Youtube, the only site that I know about to use both, has shown that using HTML 5 to display video is much faster that using flash, even when the source video is identical. Sample CSS animations, which is the preferred way to do a lot of the things that javascript is used for now, has also been shown to be very fast, without the overhead of loading a flash plugin.

But the whole point is that javascript is open, so many different groups can work on improving its performance. The site you posted could run 4 times as fast next year, with no additional work on the part of the site's developer.

Sorry I meant to say javascript used in the HTML 5 canvas tag. I shortened it to make it easier.

 

[EssentialParado]

Well the biggest thing for us is live video streaming with dynamic and multicast video streaming. We currently have to use Flash for some clients due to the great live video streaming that is a protected video stream for sensitive security subjects. We also have to use Silverlight which I hate but Silverlight has amazing video streaming for financial companies that have pretty bad bandwidth for thousands of employs. The smooth streaming with Silverlight and dynamic streaming with Flash will swap live video streams on the fly based on the users bandwidth. Multicast which should be coming to Flash as well in a few months is super critical if a company wants to stream a live meeting to all of it's employs and there is limited bandwidth. Sadly the world still is not on very fast network speeds and this is not going to change any time soon. We have to use technology that allows us to shoehorn live video into these bandwidths. Now of course live video streaming isn't a need for everybody but it is a need for us. Now with that said Flash CS5 should allow us to make a native Iphone app that can stream live video from the Flash Media Server. It is my assumption that Hulu is currently on the private beta for CS5 which is why they may now make a Iphone app for Hulu. The timing is too much of a coincidence. This however doesn't help us with everybody else that doesn't use a Iphone or Ipad so we will still have to use Flash and Silverlight until an open source HTML alternative can be invented. There is promise of moving live streaming to HTTP but it has too many security holes right now for any of our clients to even consider it.

Can't you shift to streaming using H.264 and put it inside a Flash container for Flash users, and native for HTML 5 users? — Just essentially what YouTube and Vimeo are doing, but streaming instead.

 

[smetvid]

Can't you shift to streaming using H.264 and put it inside a Flash container for Flash users, and native for HTML 5 users? — Just essentially what YouTube and Vimeo are doing, but streaming instead.

We only stream with H264 video. The problem is that it needs to be secure and it must run through a streaming server with encription. HTML 5 as far as I know doesn't support any of that. H264 streaming also uses a RTMP path and not a HTTP path. HTTP is too easy for people to steal the video stream and we stream very sensitive material. Most of our clients also need some form of dynamic stream switching to compensate for different bandwidths. HTML 5 offers no option for this as well. We will however be building our own app for the Iphone/Ipad in the very near future so this should really help out. We are more like Hulu then Youtube or Vimeo. Our content must be streamed and not progressive downloaded.

 

[lilo777]

You're missing the point (and being a wonderful little ray of sunshine at the same time). It's one thing to have this level of interaction in a native application, and to have it run as smoothly as it does. It's something else entirely to have it as a browser based application. If anything, it would probably run really well on the iPad, considering that it doesn't seem to be all that processor intensive.

As for what one might draw in it, I'm assuming you are being a smart aleck and implying that finger's are too clumsy an instrument for making anything of value in a graphic program. I present to you this article: http://www.newyorker.com/online/blogs/tny/2009/05/jorge-colombo-iphone-cover.html.

Being a software engineer myself, I understand perfectly well the implementation differences and why developers might be excited about these advances. Yet as a consumer, why should I care? It's just an excellent solution for the wrong problem. If I need to create something, I'll just use the desktop and the mouse or a pen. I'll do the job better and much much faster. Unless for some reason I have to do it on the run and thus have to use mobile platform. Even then tablet PC would be a much better choice. iPad is simply the wrong tool for this job.

 

[EdwardW]

This is an HTML5 drawing application. It is awesome. I can't wait to use this with the iPad.

http://mugtug.com/sketchpad/

So are you actually able to get this URL to work on your ipad? It works in the sense that I can draw dots, but not paint around with my finger. Just wondering if there is some trick to get safari to stop scrolling.