WebScratch Demo

This is a demo of a HTML/CSS/JavaScript-only implementation of drag and drop programming that should look like Scratch (http://scratch.mit.edu).

I started this for a Scratch-like web development tool but I made it look almost exactly like Scratch.

This is what Scratch 2.0 should look like in my oppinion - don't use flash ;)
These are in my oppinion the pros and cons of using HTML/CSS/JS
+ Very lightweight (this example only uses images for the 'hats' and the 'toolbar'
+ Built in cross-platform (runs on windows, mac, linux, ipod, ipad, windows phone, every phone, every device that has internet connection)
+ It's cool - No plugins, that's the web future :)
+ Does not require any 3rd party app like flash
+ Allows use of all built in browser tools to animate etc
+ Cool development libraries available like jQuery or prototype etc (not used in this demo though)
- It's a bit more difficult to do.
- Might be slower for huge scripts

You can already drag, drop and click blocks together, however you cannot yet nest them. It also stores which blocks are stacked together.

Category:

Science & Technology

Tags:

• scratch
• programming
• drag
• drop
• javascript
• html
• css

[bjmdarken]

What type of scratch is this? (hdarken)

[JSOvideo]

@bjmdarken This is an experiment I did to see how Scratch could work Javascript/HTML, inside your browser.

[evhan55]

JSO, amazing.

[JSOvideo]

Thanks :) Do you know if there are already plans about how Scratch 2.0 will be made? Flash, like this - just html and javascript, or something else?

[Paddle2See]

Amazing! It looks so real...you are really good at computers.

[JSOvideo]

Thanks ^^ The blocks are actually just rectangles, with border and background colors copied from Scratch, with some corner rounding... The hat and the green flag is the only image used - the rest are basic html elements with borders etc... That's why the 'connector' between blocks is missing - it's not rectangle...

[TheRealCheeseMunchy]

Sweet looks awesome.

[mariobrasil9]

Already made Booleans?

[mariobrasil9]

In Which Site is this?

[fg3756547]

And I want to help. Can I? :D

[fg3756547]

Hey Joren! Can I try this? :P

[newcoolvid27]

Where can I get this?

[omegaplatypus]

However I do want to point out a few things. While JS/HTML is more cross-platform than just about anything else, it is very unlikely that a rich web application like Scratch would work on the iPhone or iPad unless specifically engineered to do so, since their javascript engines are heartbreakingly slow. Using flash would ensure that S2.0 would work identically across all platforms that support it. ...long comment, need forum topic!