Tutorials Application Concept

[Marked 197]

Hey guys,

 

I'm taking the unusual step of showing you something that isn't even near finished. The reason is probably that I'm rather close to failing uni this year, pretty down on motivation at the moment, and its late on a sunday, so in case I decided to get my act together I won't be finishing this too soon :P

 

First off, this is all about the concept not the design. I messed around with the category view, but aside from that there's no styling to it whatsoever. So don't comment on how bad it looks....

 

What I would like you guys to do is mess around with it. Make as many tutorials as you want and just play around with the system. I don't care what you upload or type. To do that, there is a 'Create' link on the following page:

http://www.rmxpunlimited.net/component/tutorials/?view=category

 

When you upload media, you paste the code into the main text box, and it will show up in your tutorial. I'm sure that's not too hard to figure out.

 

Here's an example of what you can already make with it: http://www.rmxpunlimited.net/component/tutorials/index.php?option=com_tutorials&view=display&id=1

 

Did I mention it isn't even near finished?

 

Suggestions on features would be nice :)

[madanchi 18]

ooh sweet looking good! I'll try it out, just got to find a tutorial to write about

[FranklinX 37]

This is great! During the Summer bring I might make some tutorials for VX. We need more VX users on the forums. I feel so lonely.

[Marked 197]

@madanchi: it shouldn't look good lol I only just touched on design

 

@Franklin: yup I agree, we need way more VX content.

 

 

I'm kinda disappointed no one tried it out yet. That's the point of the topic. I don't want tuts coz I'm going to delete this anyway, just screw around with it. K thx.

[kellessdee 48]

This is gonna be awesome when it is finished (but obviously your schooling should be top priority, not trying to play mommy but just saying) And you don't mind what I create? Like you REALLY dont mind??? (AT ALL?) I won't do anything obscene or offensive, but it may be completely random.

 

And so far it does look good, other than the fact that the "bars" that display engine type kinda clashes a lil bit with the rest of the site (however it is just looks and doesn't affect functionality)

 

AND technically the changing Icon's tutorial should probably non-engine specific since it would work for any .exe file....which again is a non-issue.

 

Otherwise, looking good so far :alright: now back to your school work :P

[ShinyToyGuns 29]

Oh lawdy lawdy...anybody remember this?

 

http://www.rmxpunlimited.net/component/tutorials/?view=display&id=2

 

Good job, Marked...now you must finish it! :D

[Marked 197]

And you don't mind what I create? Like you REALLY dont mind??? (AT ALL?) I won't do anything obscene or offensive, but it may be completely random.

 

And so far it does look good, other than the fact that the "bars" that display engine type kinda clashes a lil bit with the rest of the site (however it is just looks and doesn't affect functionality)

 

AND technically the changing Icon's tutorial should probably non-engine specific since it would work for any .exe file....which again is a non-issue.

Lol yeah, post ANYTHING you want. I actually wanted you guys to test the system of creating a tutorial, and to do that you need to actually create it so I can see if its being tested...

 

For the engine type thing, you mean just the style doesn't really fit in?

 

And yeah it does goes in non-engine specific, I decided to place it randomly due to there being no appropriate 'type' category. These categories are off the top of my head, they're in no way final.

 

Oh lawdy lawdy...anybody remember this?

 

http://www.rmxpunlimited.net/component/tutorials/?view=display&id=2

 

Good job, Marked...now you must finish it! :D

I remember that tutorial. In fact I meant to move some of your tuts to the official tuts forum, but this system will make such a feature (that feature being featured tuts) a breeze.

 

Your tutorial doesn't really utilize the system fully, but I added in the 'Show step titles' (will hide/show step 1, step 2 etc.) for those types of tutorials where those steps titles aren't necessary, such as yours where's its the one image. :)

 

 

I wana see at least 10 tuts in there :yes: seriously go spam-happy I don't care. It will be deleted anyway.

[kellessdee 48]

I created one and the "Steps" portion / difficulty didn't show up until after originally submitting the tutorial. Perhaps it should be available right off the bat? And I believe you may need an "other" category for "Type" As my tutorial (although it isn't real nor should be followed hehehe) doesn't fit with eventing, rgss, spriting or mapping...Just in case someone wishes to submit a tut that isn't one of these things or for example the tutorial you submitted would probably be engine - non-specific, type - other...or something. Just thought I would let you know :)

 

And ya, about the boxes or bars that have the engine in it (when you first go to the tutorial page) (Non-specific, rmvx, rmxp) simply the style doesn't seem to fit in...however this is definitely a non-issue (functionality is more important than style)

 

EDIT: And it doesn't save extra white space it seems... I originally made mine with paragraphs (one step I just labelled the steps myself) and it all appeared as one block of text, with out the blank lines.

 

EDIT2: DERP. Just realized that was the "Description Box" I will read next time. I just realized how this system works, you put title and description, submit then put the actual tutorial. Maybe you should make it so it can all be done in one shot?

 

EDIT3: It was kind of difficult flipping back from step to step...perhaps once you make a step and save it it brings you back to the original description page so you can easily go onto the next step?

Edited April 18, 2011 by kellessdee

[Marked 197]

Thanks for your feedback :D

 

EDIT2: DERP. Just realized that was the "Description Box" I will read next time. I just realized how this system works, you put title and description, submit then put the actual tutorial. Maybe you should make it so it can all be done in one shot?

Ah yeah. Aside from adding steps, that's probably a good idea. Of course steps allow you to stop your work and come back to it, and you can progressively move back to it (and there were be an ajax system of changing their order). The reason why the create page and the edit tutorial page (excluding steps) is different is because, those new fields came after I made the create page :P

 

EDIT3: It was kind of difficult flipping back from step to step...perhaps once you make a step and save it it brings you back to the original description page so you can easily go onto the next step?

I thought about this quite a bit, and its sort of dilemma. When you're making your step, you actually need to save it and reload several times before actually leaving the page. The reason for this is your media. Once you type your step up, you need to save it. Once you upload media the page reloads. Then you'll probably add in the media code to your text and need to save it again. Therefore saving the step and going back to the main edit page is impracticable. However thinking about it just now, adding media could goto a whole new page? I don't know which method would be easier for our tutorial authors...

 

And I believe you may need an "other" category for "Type" As my tutorial (although it isn't real nor should be followed hehehe) doesn't fit with eventing, rgss, spriting or mapping...Just in case someone wishes to submit a tut that isn't one of these things or for example the tutorial you submitted would probably be engine - non-specific, type - other...or something

Yup, I just made up the categories off my head at the time. It's not a definitive list.

 

And ya, about the boxes or bars that have the engine in it (when you first go to the tutorial page) (Non-specific, rmvx, rmxp) simply the style doesn't seem to fit in...however this is definitely a non-issue (functionality is more important than style)

Haha yeah, designing and writing CSS for me takes a long time, because I (think) I know what looks good but I'm not a designer so I spend a lot of time on it. Those forms are the only thing on the page with attached CSS, everything else is default html. Secondly I want to completely redesign the look of this site so there's no existing CSS/design styles I can utilize for this. Maybe I should try and make it in the same style as the website..

[kellessdee 48]

hehe No problem I had fun making my ridiculous tutorial :P

 

I figured the types/categories were in no way final (plus probably easy to change anyways...well to be honest I don't really know anything about CSS and very little about html) and the design really is a non-issue. I am sure by the time you finish you'll have something that matches better (or even if not, does it truly matter?)

 

And now what you have right now makes more sense (I didn't upload media, but now I see how it works) if it isn't too difficult, maybe when you add a step it creates a little title/text box to put the step right in the create tutorial page? So you can type your steps right from that page, and also add media there? Even if not though, if there were instructions on how to post the tutorials it would be fine... Although technically, the reason I failed at doing steps properly was because I failed to read what each text box was called and assumed I was typing up the tutorial in the description box :/ So I guess instructions helping would really depend on how lazy the writer is as well. (whether they read them or not)

 

But i think when this gets finished it will be awesome! The tutorials will be very organized and concise; and since they will all be similar formats I think it will be much easier to transition and connect the concepts taught in each tutorial.

[Marked 197]

Yeah at the moment it is a little bit confusing, there needs to be some documentation or perhaps for the members first ttorial, on page help instructions. I will include little ? icons to describe textboxes as well.

 

if it isn't too difficult, maybe when you add a step it creates a little title/text box to put the step right in the create tutorial page? So you can type your steps right from that page, and also add media there?

That's a good idea.... But I'm thinking, should that replace the other method of editing steps? Or should it be just the textbox to make quick tweaks to the text? What do you think?

 

I've been avoiding ajax with this one, but what I'm thinking now is when you click edit the form slides down, and we you click save it saves to the database automatically and the page doesnt even move. I can even do ajax uploads and have the files appear after they're uploaded (as with the project cards). That will sync the media system of manually pasting the codes into the main textbox.

 

plus probably easy to change anyways...well to be honest I don't really know anything about CSS and very little about html

They're actually rows in the database. To add/remove takes less than a second :P

[kellessdee 48]

the ? icons sound like a great idea.

 

And as for the method of editing/creating steps, I am not sure...it seems more accessible for tutorial writers if you have both, kinda like how the forums have a quick reply or full editor, and would probably depend on the person's preference. Like me personally, I would like just having the quick edit (because my brain often gets ahead of itself and I find I have to go back and make sure I didn't skip something or repeat something), so for me I would probably just use the quick edits so I can double check the steps easily or if I am writing one step and realize I forgot something in another step I and quickly fix that before I forget again.

 

however it would probably be a better idea to create the tutorial offline first (so it can be proofread or something) then just copy-pasted into this system...So I guess it really depends on how people will use this. Will they be writing the tutorials right in the system? or will they create the tutorial and copy/paste the appropriate steps and put in the media after? I think people will probably do both. So maybe having both options is the best, as long as it isn't more work than it's worth it. I trust you can figure it out though!

 

And I figured it was that simple to change those little things; just didn't want to assume too much about something I don't know much about.

[Marked 197]

A quick edit system is much easier to make :lol: I think what I'll do is when you click edit that will display a textfield where you can edit it. With that quick form will be a full edit button, just like the forums posting system.

 

however it would probably be a better idea to create the tutorial offline first (so it can be proofread or something) then just copy-pasted into this system...So I guess it really depends on how people will use this. Will they be writing the tutorials right in the system? or will they create the tutorial and copy/paste the appropriate steps and put in the media after?

Making a tutorials component was tricky because I thought, how do you categorize content fields when there is no defined content? The steps idea was the solution, and this allows you to write your tutorial straight into the system. Since there are no steps when you make it, its automatically unpublished and allows you to work on your tutorial until you think its ready. Writing it offline first does not suit the system. If we add members (who are gone) tutorial from this site, it will take time to divide them into steps because generally they don't list the sections are steps. Though we could paste a tutorial into one step and hide the step titles, it would look the same.

 

So yeah, the steps should make it easier to write and read tutorials, if only by a small margin. If you write them offline you're typing into a text editor anyways, I don't there's too much difference if you're just typing into a textfield (and these will be expandable, I'll show you that soon hopefully). I've only written tutorials offline to either quickly save my work, or so they didn't show up on the forums half way through when I wanted to save.

[kellessdee 48]

Yea I think that will be the best way to go! Especially since everyone is used to that on the forums maybe it will be almost instinct on using this system.

 

The steps idea was the solution, and this allows you to write your tutorial straight into the system. Since there are no steps when you make it, its automatically unpublished and allows you to work on your tutorial until you think its ready.

 

Wow, I can't believe this never really sunk in. Now the whole create tutorial, save then work on the rest totally just made perfect sense to me. That's right, when you first create it, it is unpublished but saved. Which now makes it even more awesome because it would be like a blog, (well I guess the only thing similar is the publishing/draft part...XD) so you can easily work on it, view it, fix it until it is time to release it. I forgot to check, but is there a preview option?

[Marked 197]

Wow, I can't believe this never really sunk in.

Haha, I suppose you really need to get in there and test it. It is sad though, that only 2 members have actually seen inside of it. I suppose then its fortunate I make these things out of boredom, otherwise I'd have no motivation at all.

 

I forgot to check, but is there a preview option?

Nope, haven't got that far. There will be a sortof 'dashboard' where members can easily access there tutorial instead of searching through the categories. But, members will be able to see there unpublished tutorials as normal tutorials (with indications that it is unpublished) so they can easily preview it.

 

Oh, and I do plan on a second navigational system on the side of the page. The breadcrumbs may not be ideal for all, but at the moment thats the only way to navigate through the system. I think it works fine, but categories down the side will help too, and that's probably a good place to have a search box too. I just had the best idea ever for tags :P

 

Ok I gave in and added some CSS in the process of making the quick edit, but again this isn't final! I suppose since you're probably the only one to look, I'll post a screenie:

 

Ok kellessdee, I made the quick edit for you :) Go in and test it out if you like. Hopefully if I find more time for this I'll start getting into some features we discussed in the other topic :)

 

I'm gona do a lot of UI research for the design. I want it to look nice and professional.

[kellessdee 48]

Sometimes boredom is the best motivator!

 

Wow, already feels much nicer to use! :D I like the buttons along the top. Next suggestion though, maybe allow use of bbcode? (i think that's what its called) well at least for

code tags!

I dunno why i put that in code tags but it seemed fun. It may be good for the rgss tutorials that give syntax examples or something? I just find it really hard to read any code that doesn't use a fixed-width font.

or can you do that and i just messed the tags up without realizing :/ it looked like I spelt code + /code right..

 

EDIT: Oh yea, now I see you can switch between published and un-published...which is cool, if you notice a mistake after you can un-publish the tutorial and fix it :D

Edited April 19, 2011 by kellessdee

[Marked 197]

Haha of course. BBCode is essential. It was always going to be a feature. There's going to an rgss tag which is specific to ruby code. I've already got the system setup and the syntax highlighting set to the same as the RPG Makers, as you'll see in the RGSS archives. At the moment I'm probably thinking of specific bbcode only, just a limit amount and 'necessary' bbcodes.

 

I know I showed this prematurely, being without design people won't pay that much attention to it. Has potential though. We could start adding tutorials now if we wanted to.

 

I haven't even started on the in-tutorial view :D

[kellessdee 48]

oooh I am definitely digging the RGSS tags.

 

And this project I think will be awesome once complete. Adding actual tutorials would be pretty cool now, however I kinda spammed it up a little...but it would probably be easy to differentiate which tutorials need to be deleted and which wouldn't.

:alright: looking good

[Polraudio 122]

This is really nice. Just added one.

http://www.rmxpunlimited.net/component/tutorials/?view=display&id=5

Didnt realize the 1st text box was description lol. typed all of it in there and lost 90% of it when i hit save. I should pay more attention.

Should make that box a little smaller lol.

[kellessdee 48]

lmao well at least I am not the only one who did this :P Although, my tutorial wasn't a real one so probably a little more frustrating for you.

[Marked 197]

Didnt realize the 1st text box was description lol. typed all of it in there and lost 90% of it when i hit save. I should pay more attention.

Should make that box a little smaller lol.

Lol I know. The height is defined in CSS that I copied from another part of the site that makes all textareas that height. I'll make it heaps smaller :P I also plan to impose a char limit.

[madanchi 18]

how do i psot images? the usual way from an image upload website didnt work and I uploaded a picture in the 'upload' part in the tutorial didnt work

 

edit: fixed, bit of a derp moment is all

Edited April 21, 2011 by madanchi

[Marked 197]

Haha ok :) I'm considering adding bbcode but I'm also thinking against it. The reasoning being sometimes members go and upload to really sucky image hosts, for example photobucket (and i say that based on how many 'not found' thumbnails I see from photobucket). So in order to prevent all images being lost, may be wiser to only allow uploaded images.