ElementalCode / elemental

A drag and drop block-based coding environment for front-end web technologies.
http://elementalcode.herokuapp.com
35 stars 10 forks source link

Tutorial Section #23

Closed quat1024 closed 7 years ago

quat1024 commented 9 years ago

If the goal of Elemental is to be accessible to people who are interested in web design but know nothing about HTML, we're going to have to show them the ropes :smile:

We'll need a couple of simple example webpages, some more complex projects, and a step-by-step guide area (like Scratch's "help" pullout) at least.

Tell me what you think :)

matthewr6 commented 9 years ago

Agreed, but we have to build the thing first ;)

quat1024 commented 9 years ago

Yay for the "Planning" tag :heart:

TheInitializer commented 9 years ago

We need Joyride!

PullJosh commented 9 years ago

That would be cool. :D

PullJosh commented 9 years ago

But it should be an optional thing - not something that's shoved down a user's throat (make it obvious that it's an option, but don't start the tutorial as soon as the open their first project.)

matthewr6 commented 9 years ago

definitely :P

rumanti commented 9 years ago

Don't follow Tynker's path. :P

TheInitializer commented 9 years ago

lol you mean the $50 ripoff of scratch?

matthewr6 commented 9 years ago

Yeah And not joyride because jQuery

an-OK-squirrel commented 9 years ago

Sorry I haven't been doing anything, busy with ludum dare

matthewr6 commented 9 years ago

user pages please

an-OK-squirrel commented 9 years ago

I'm done with LD becuase I gave up early so I'll do it :P

PullJosh commented 9 years ago

Here's an interesting site about first-time user experiences (essentially what we're trying to figure out here). Probably worth a read. ;)

http://firsttimeux.tumblr.com/

infinitytec commented 9 years ago

I can work on this (once we have more...).

matthewr6 commented 9 years ago

I'd prefer we do pages first because there's a lot of stuff in the editor that's not stable at all

PullJosh commented 9 years ago

Of course! I just found the article and wanted to share it before it was lost. ;)

matthewr6 commented 9 years ago

IK, that was meant for infinity because he asked what to do :P

PullJosh commented 9 years ago

Oh. :3

TheInitializer commented 9 years ago

remind me why we can't use jquery?

PullJosh commented 9 years ago

Slow page loads & spaghetti code.

matthewr6 commented 9 years ago

http://lea.verou.me/2015/04/jquery-considered-harmful/

towerofnix commented 9 years ago

Honestly the only thing I use jQuery for is $.ajax which I should probably just be using promises and XMLHTTPRequests..

TheInitializer commented 9 years ago

yeah jquery's pretty overrated... but everyone uses it for everything, that's the thing

matthewr6 commented 9 years ago

"everyone"? "everything"?

TheInitializer commented 8 years ago

we need https://github.com/usablica/intro.js

matthewr6 commented 8 years ago

+1

TheInitializer commented 8 years ago

No jQuery in this one :dancer:

TheInitializer commented 8 years ago

Oh wow lol, I tried typing :D and it came out as :dancer: :dancer: is the new :package: :P

matthewr6 commented 8 years ago

what o.o

PolyEdge commented 8 years ago

Shift Semicolon D Return = :dancer:

TheInitializer commented 8 years ago

@Dylan5797 enter*

matthewr6 commented 8 years ago

reentry IN A GIANT BALL OF FIRE

PolyEdge commented 8 years ago

Boom

matthewr6 commented 8 years ago

@Airhogs777 I think you volunteered to do this on the forum thread

mrjacobbloom commented 8 years ago

yes I did haha

matthewr6 commented 8 years ago

so basically go crazy with it I guess

TheInitializer commented 8 years ago

usablica/intro.js

mrjacobbloom commented 8 years ago

live demo, lemme know if you have any feedback before I try to figure out pull requests: https://intro-airhogs777.c9users.io/elemental/index.html?tutorial=true

towerofnix commented 8 years ago

Looks pretty cool!

It glitches out if I've previously got the palette scrolled or if I press enter when I'm not supposed to. It'll also completely close the tutorial if I press escape - could it be possible to restore the tutorial maybe?

mrjacobbloom commented 8 years ago

Yes the scrolling issues are something I've been struggling with for hours :package: -- that's why I decided to give it its own URL where it runs immediately, it makes it harder for the user to screw it up haha. As for restoring the tutorial, it shouldn't be too hard to track your place in case you accidentally exit

TheInitializer commented 8 years ago

Looks great! Quick question: why is the default text still breadfish.gif?

mrjacobbloom commented 8 years ago

@liam4 I think I fixed the scroll issues and removed keyboard commands entirely (except enter, I can't figure out how to get rid of it, I think it's a tabindex thing that needs to be there for accessibility)

mrjacobbloom commented 8 years ago

oh wait, in the OP @Firedrake969 said we should have a bunch of 'em. I'll start working on a system to load tutorials more on-demand-like.

matthewr6 commented 8 years ago

Because breadfish.gif is amazing

mrjacobbloom commented 8 years ago

Because breadfish.gif is amazing

could it be the default img src? I feel like having a filename as the default text is confusing

BookOwl commented 8 years ago

Default text ideas:

matthewr6 commented 8 years ago

I don't even know why it's breadfish.gif right now lol

towerofnix commented 8 years ago

I think we should just use Breadfish. :P

matthewr6 commented 8 years ago

K

TheInitializer commented 8 years ago

what is breadfish