Scratch

billyedward · 2010-06-22 19:53:19

Hello, everyone!
I am here to ask for your input on a new little project that I am working on.
It is called ScratcHTML, and it turns scratch into an HTML editor.
I got the idea from jens' chirp's XML exportation feature.
Basically, each HTML element is represented by a block.
Here is a picture of scratcHTML as it currently stands:

This would compile to:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Using ScratcHTML</title>
        <link rel='stylesheet' type='text/css' href='/style.css' />
        <script>function welcomeMessage() {alert('Welcome to my page!'); }</script>
    </head>
    <body>
        <a href='/index.html'>
            <img src='/images/banner.jpg' height='100' width='650' />
        </a>
        <q href='/index.html'>
            An HTML editor in Scratch!
        </q>
        <div style='position:absolute;right:100px;top:150px;'>
            <form action='/search.php' method='get'>
                <input type='text' name='searchBox' value='' />
                <input type='submit' name='search' value='Search!' />
                <br />
                <b>
                    Search:
                </b>
                <input type='radio' name='searchWhat' value='web' />
                The Web
                <input type='radio' name='searchWhat' value='thisSite' />
                This Site
            </form>
        </div>
        ScratcHTML can:
        <ol>
            <li>
                Allow you to create HTML documents in a familiar editor
            </li>
            <li>
                Allow you to create HTML documents in a familiar editor
            </li>
        </ol>
    </body>
</html>

The reason that I am telling you so early in the development stages is to get your opinion on what it should do, what you'd like to see in it, how it should work, etc. Basically, anything that you have to say about it, go ahead!

Suggestions for extensibility are also welcome. For instance, one plan I have is to extend it to all XML types, and then to read the DTD and base the block palette off of that. But that is in the far future, at this point.

Last edited by billyedward (2010-06-22 20:25:16)

floatingmagictree · 2010-06-22 19:57:42

This is a great idea! I can spread the word if you'd like.

cds56 · 2010-06-22 19:59:10

billyedward wrote:
Hello, everyone!
I am here to ask for your input on a new little project that I am working on.
It is called ScratcHTML, and it turns scratch into an HTML editor.
I got the idea from jens' chirp's XML exportation feature.
Basically, each HTML element is represented by a block.
Here is a picture of scratcHTML as it currently stands:
http://img25.imageshack.us/img25/818/scratchtmlwin.jpg

The reason that I am telling you so early in the development stages is to get your opinion on what it should do, what you'd like to see in it, how it should work, etc. Basically, anything that you have to say about it, go ahead!

This would kick notepad's minimalistic abilities.

I see that it would be able to write scripts and such. How about PHP?

But if you think about it, scratch blocks would make a nice dev-env.

What if the stage rendered the website?

ScratchReallyROCKS · 2010-06-22 20:00:27

This will be epic. I can't wait for it to be finished, which will be when?

EDIT: also, when or will you post a beta?

Last edited by ScratchReallyROCKS (2010-06-22 20:02:17)

nXIII · 2010-06-22 20:01:30

This is a wonderful idea! However, you may want to rethink how attributes are defined; there are so many that it would be impossible to make them static, so I would look at something like Jens' MultiArgMorph, but it had the layout of

[a [href▼]="[http://www.google.com/]" [id▼]="[googleLink]" ◄►]

where each attribute/value pair is added/removed with a click of the corresponding arrow.

Also, all HTML elements can technically have complex contents, so no elements should be non-c-shaped. However, I do not think this is a very good idea, seeing as it would lead to unnecessarily lengthy and hard-to-read code. Therefore, I propose this solution:

____________________________________________________________
|a [href▼]="[http://www.google.com/]" [id▼]="[googleLink]" ◄►|
-------------------------------------------▼---------------------------------------------

So one could "expand" or "contract" the block, making code more flexible, but also more understandable and shorter.

Last edited by nXIII (2010-06-22 20:02:10)

meowmeow55 · 2010-06-22 20:08:03

Sounds cool. Seeing as I don't know any HTML, I can't suggest much to put in it, but it's looking good so far (even for v0.0a tongue ). And maybe, if you'll release a beta version in the near future for people to test out, it just might help my nonexistent HTML skills. big_smile

billyedward · 2010-06-22 20:17:13

nXIII wrote:
This is a wonderful idea! However, you may want to rethink how attributes are defined; there are so many that it would be impossible to make them static, so I would look at something like Jens' MultiArgMorph, but it had the layout of

[a [href▼]="[http://www.google.com/]" [id▼]="[googleLink]" ◄►]

where each attribute/value pair is added/removed with a click of the corresponding arrow.

Also, all HTML elements can technically have complex contents, so no elements should be non-c-shaped. However, I do not think this is a very good idea, seeing as it would lead to unnecessarily lengthy and hard-to-read code. Therefore, I propose this solution:

____________________________________________________________
|a [href▼]="[http://www.google.com/]" [id▼]="[googleLink]" ◄►|
-------------------------------------------▼---------------------------------------------

So one could "expand" or "contract" the block, making code more flexible, but also more understandable and shorter.

Yes, I had that thought, too.
My current plan is to allow you to select which ones are available via a context menu, and then edit them based on that. Another alternative that I have considered is creating an argument block, that rather than translating to an element it is made into an argument for it's parent element. Possibly a combination of the two, so as the 'common' ones are available through the context, and the rest can be enteres through the attribute block.

billyedward · 2010-06-22 20:22:12

cds56 wrote:
billyedward wrote:
Hello, everyone!
I am here to ask for your input on a new little project that I am working on.
It is called ScratcHTML, and it turns scratch into an HTML editor.
I got the idea from jens' chirp's XML exportation feature.
Basically, each HTML element is represented by a block.
Here is a picture of scratcHTML as it currently stands:
http://img25.imageshack.us/img25/818/scratchtmlwin.jpg

The reason that I am telling you so early in the development stages is to get your opinion on what it should do, what you'd like to see in it, how it should work, etc. Basically, anything that you have to say about it, go ahead!
This would kick notepad's a--...... minimalistic abilities.

I see that it would be able to write scripts and such. How about PHP?

But if you think about it, scratch blocks would make a nice dev-env.

What if the stage rendered the website?

Some excellent suggestions!
As you can see in the picture, there is a PHP block. It, the JS, and ASP are all very crudely implemented, basically just giving you a text box to put the code in. I am working on a javascript editor to go inside this, as well as CSS. These will act like mini editors, that pop up when you click on a style or a script block. This, I suppose, could be extended to PHP.

As far as the stage rendering, I would have to find a way to embed windows API elements into squeak, otherwise I can't actually include a browser. For now, my 'fallback' plan is to have a preview button, which compiles the code to a temporary file and opens a browser on that.

ScratchReallyROCKS · 2010-06-22 21:32:33

ScratchReallyROCKS wrote:
This will be epic. I can't wait for it to be finished, which will be when?

EDIT: also, when or will you post a beta?

bump?

waveOSBeta · 2010-06-22 21:40:06

Epic.

nXIII · 2010-06-22 21:56:47

I'm whipping up a framework class, HTMLBlockMorph, for you. I'll post it tomorrow or sometime soon.

fullmoon · 2010-06-22 23:36:09

This is fantastic! I've been thinking about building a Java/Actionscript with blocks, but I'm secretly hoping they'll release the designblocks source so I can use that instead. My suggestion is that you take nXIII's advice, and perhaps consider a feature where you can select an attribute to add to a block rather than having to add unnecessary attributes with the arrow buttons until you find the one you want. Even this could get long...I might suggest an "attribute" command block that simply lets you add an attribute to the parent element. Oh, one more thing: for scripting functionality, and actually adding text, using blocks as we know them could get clumsy. Instead of the traditional Scratch string input field (for example in the [<?php [] ?>] block) something similar to a comment block would be useful to allow more room to type.

And maybe a CSS editor?

Last edited by fullmoon (2010-06-22 23:39:53)

iCode-747 · 2010-06-22 23:45:13

Brilliant! Good luck! yikes

When releases, this goes in meh siggy. wink

billyedward · 2010-06-23 01:08:36

ScratchReallyROCKS wrote:
ScratchReallyROCKS wrote:
This will be epic. I can't wait for it to be finished, which will be when?

EDIT: also, when or will you post a beta?
bump?

I honestly don't know.
I'll reply when I do, though.

JSO · 2010-06-23 05:12:25

I love it!

The args idea is a good one too ;D

cds56 · 2010-06-23 06:16:37

ScratchReallyROCKS wrote:
ScratchReallyROCKS wrote:
This will be epic. I can't wait for it to be finished, which will be when?

EDIT: also, when or will you post a beta?
bump?

bump

ihaveamac · 2010-06-23 06:24:12

amazing. Make a preview option!

And will there be a beta soon?

jacool · 2010-06-23 06:38:22

I love it! - Will there be some kind of WYSIWYG display?

coolstuff · 2010-06-23 07:48:50

That will be so cool!

dav09 · 2010-06-23 07:53:36

Great idea, i will be good at this i think since i know html, this will also teach others html!

ScratchReallyROCKS · 2010-06-23 08:09:00

cds56 wrote:
ScratchReallyROCKS wrote:
ScratchReallyROCKS wrote:
This will be epic. I can't wait for it to be finished, which will be when?

EDIT: also, when or will you post a beta?
bump?
bump

He already answered. He said he didn't know.

what-the · 2010-06-23 08:19:08

This is cool. If you can get a preview box of the website in the program it would be awesome.

meowmeow55 · 2010-06-23 10:36:24

Yeah, it would be cool to use the stage as a preview for the document you are making.

cds56 · 2010-06-23 14:24:42

meowmeow55 wrote:
Yeah, it would be cool to use the stage as a preview for the document you are making.

The stage would also make a very small image. Presentation mode = live preview?

meowmeow55 · 2010-06-23 18:30:22

Another idea: integrate Scratch's image importer/editor so you can pop images in your HTML document more easily and edit them (they would be in memory/temp until you saved, then they would be put in "mydocument_files" folder). The sprite area could then be used to show what images you had chosen so far, and then there could be a block with a drop-down menu to select one of those images for the background, then another block for placing an image in a certain position. cool

Scratch

archived forums

#1 2010-06-22 19:53:19

ScratcHTML

Code:

#2 2010-06-22 19:57:42

Re: ScratcHTML

#3 2010-06-22 19:59:10

Re: ScratcHTML

billyedward wrote:

#4 2010-06-22 20:00:27

Re: ScratcHTML

#5 2010-06-22 20:01:30

Re: ScratcHTML

#6 2010-06-22 20:08:03

Re: ScratcHTML

#7 2010-06-22 20:17:13

Re: ScratcHTML

nXIII wrote:

#8 2010-06-22 20:22:12

Re: ScratcHTML

cds56 wrote:

billyedward wrote:

#9 2010-06-22 21:32:33

Re: ScratcHTML

ScratchReallyROCKS wrote:

#10 2010-06-22 21:40:06

Re: ScratcHTML

#11 2010-06-22 21:56:47

Re: ScratcHTML

#12 2010-06-22 23:36:09

Re: ScratcHTML

#13 2010-06-22 23:45:13

Re: ScratcHTML

#14 2010-06-23 01:08:36

Re: ScratcHTML

ScratchReallyROCKS wrote:

ScratchReallyROCKS wrote:

#15 2010-06-23 05:12:25

Re: ScratcHTML

#16 2010-06-23 06:16:37

Re: ScratcHTML

ScratchReallyROCKS wrote:

ScratchReallyROCKS wrote:

#17 2010-06-23 06:24:12

Re: ScratcHTML

#18 2010-06-23 06:38:22

Re: ScratcHTML

#19 2010-06-23 07:48:50

Re: ScratcHTML

#20 2010-06-23 07:53:36

Re: ScratcHTML

#21 2010-06-23 08:09:00

Re: ScratcHTML

cds56 wrote:

ScratchReallyROCKS wrote:

ScratchReallyROCKS wrote:

#22 2010-06-23 08:19:08

Re: ScratcHTML

#23 2010-06-23 10:36:24

Re: ScratcHTML

#24 2010-06-23 14:24:42

Re: ScratcHTML

meowmeow55 wrote:

#25 2010-06-23 18:30:22

Re: ScratcHTML

Board footer