Designer Tutorials

Preface

In preparing this website for public launch we thought it would be a good idea to create a tutorial on creating Tutorials. The software that powers www.designer-tutorials.com is Drupal - a powerful opensource community driven web application.

This tutorial aims to establish guidelines for creating and submitting your own tutorial using Drupal then publishing them to this website.

Lets Get Started

Things you will need:
- A website with Drupal installed
- Addon modules: image, img_assist, codefilter
- A good browser (ex: firefox)
- A method for Screen Capture
(mac: cmd+shft+4 -> drag/release)
(pc: prnt scrn button above the cursor keys)
- Image editing/authoring program: Photoshop, GIMP, etc
- Some basic HTML knowledge
- Some time and patience

Drupal Modules

We created this website using the Image, Image Assist and CodeFilter modules for Drupal 5.x - There are propbably a host more modules you could optionally install, but we have found these three to be the most effective for what we are trying to do: Create a tutorial using Drupal.

The Image Assist module is very effective for allowing Registered Users to upload inline images (meaning the images will show up in the body of the post, in this case, our tutorial.

After you install the modules you have to activate the modules in the Drupal admin -> then configure each module to your specific website -> then allow user access to the modules.

Create Content: Tutorial

A main concept for Drupal is that you create content from the User Navigation (right side bar on this website). You can create many types of content depending on your user access roles. For this website you have the option to create 2 types of content: Image, Tutorial.

You will want to choose - Tutorial. A Content: Tutorial creation page will open up and you begin to fill in the custom fields:

1. Title
2. Tutorial Category (*please be specific)
3. Body (where I am typing up this tutorial right now)
4. Insert Image Button

Here is an example of HTML used in the Body text area (I will show you more on specific HTML tags later in this tutorial).

Tutorial Body Screenshot

Now lets add some images to your Body text.

Adding Images To Your Tutorial

Click the Add Image Button located underneath the Body text area -> A popup window will appear:

No Image Found

Because you have not uploaded anything yet -> you will have to click -> Upload -> Title you image something appopriate such as My Snapshot -> Browse for you image -> You should not need to enter anymore information on this screen -> Click Submit -> The next page will show you a preview of your image in the Tutorial. I prefer to keep mine simple: use orginal image size, no alignment, no links, etc.

Image Properties

It is easy to add Copy/Paste code from an HTML document or most other types of coding by using the:
< code >Your code goes here < / code >

Writing With Good Structure

I like to approach tutorials as if I was writing an outline for an essay. You will notice from this tutorial - I use Bold Headings for Main Topics and Sub Topics. You can use the <h3>Your Main Topic</h3> and <strong>Your Bold Text Here</strong> to help place emphasis on your content. I also like to use lists:

ex:

1. List Item 1
2. List Item 2
3. List Item 3
4. List Item 4

or this:

ex:

• List Item 1
• List Item 2
• List Item 3
• List Item 4

Putting It All Together

The rest is really up to you. You now know what modules you would need to install in order create tutorials on your own website as well as this one.

Quick rundown:

1. Create Content -> Tutorial
2. Fill in the title
3. Pick a tutorial category
4. Writ your tutorial in the Body text area
5. Start by using <h2>Your Heading</h2>
6. Follow up using supporting text
7. Inster inline images -> click on the "add image" button below the Body
8. Upload a photo
9. Submit new photo into Body
10. Have fun!

Have fun with it, but remember that other people from around the world are reading this. Clear concise step-by-step procedures and images will be your best assets.