Thanks for being a contributor to the Vallarta Yacht Club web site. We really appreciate your support. More content providers means richer, more meaningful content for our readers.

Here are some guidelines and tips to help you create content that is not only meaningful, but also has the appearance that we are looking for on our web site. These are in no particular order, but all of them are important.

What is this thing?

The VYC web site uses a Content Management System called Joomla. There are few others out there, with names like WordPress, Drupal, Blogger, etc. They all pretty much do the same job, that is to maintain a consistent look and feel for a web site while allowing multiple content providers to input web site content without being concerned about maintaining the structure of the web site. 

At the end of the day, however, it doesn't matter whether you are using a content management system or not, what is created for the web site is presented to users in a computer coding language called HyperText Markup Language or HTML. Every web page is essentially a program that is delivered over the Internet that tells a computer browser (Internet Explorer, Firefox, Chrome, Opera, et. al.) to display things on the screen. Screens can be small or large, from the display of an iPhone to a big screen on a desktop. HTML's job is to try to make sure that things are displayed on all of those media in a consistent format. Understanding screen sizes can vary dramatically this is the first "ah-ha" that content providers have.

HTML isn't the smartest language in the world - it can't be.  It has to be compatible with every browser in just about every version that was produced for the past 20 years. You are writing for the lowest common denominator. Your editing capability is much more limited than it would be if you were using MS Word or OpenOffice.

Joomla tries to make it easier for content providers by giving them an interface for creation of content that looks and feels a lot like a word processor, complete with things like spell checking, undo, cut and paste and a world of other things. In the end, however, you are doing nothing more than creating HTML code. The editor is your front end for that. People who are experienced in creating web pages often go behind the scenes and edit the HTML (and CSS, Javascript, PHP, etc.) to create special effects that the standard article editor can't do.

CREATING A NEW ARTICLE

First things first - you need to create something that goes on the website. Great! You'll want to start a new document. Since you are going to be publishing this on the web site, there are a few key concepts that you need to think about:

• Where on the web site is the article going to be published? While most articles we have on the VYC web site start out their lives on the front page, you'll find that there are many other sections, such os Junior Sailing, On The Water, Community Action, Member's Portal, etc. After your article lives on the front page for a while, do you expect it to be on another page, or just go away?
• How long is the article going to be published? Many articles are time sensitive, such as announcements of events or just news that might not be relevant several months from the publishing date. For example, it doesn't make sense to continue to publish an article encouraging people to go to and event after it happens, so you are encouraged to set an unpublish date for articles. We'll tell you how to do that in a moment.
• Are there pictures? The web is a very visual media - there is no reason why an article shouldn't have a picture or graphic, even if it is just a picture of the author of the article! Spend some time surfing the web - how many web site articles do you see that don't have some sort of graphic or photo associated with them? More pictures, less talk!
• Keep it short. The unfortunate reality of today's online society is that people reading web sites tend to lose interest after a couple of paragraphs. Keep what you have to say brief and to the point. As with any writing, try to break up the text with pictures, bullets and tables. This is especially important for web content.

OKAY, I THINK I'M READY. What do I do?

Do you have Publisher permissions? First and foremost, you need to have the appropriate permissions to create an article. Your first clue will be that you see the "Publisher Menu" when you log in to the VYC web site. The next indication is that when you click "Create or Edit a Web Site Article" you get an edit page and not an error message that you don't have permissions. If you are creating a new article, click "New Article" at the bottom. If you are editing an existing published or unpublished article, find the article in the list and click "Edit".

What do I do if I need permission to create and edit articles? Just send and email to webmaster@vallartayachtclub.org.

Okay, the edit screen is open. Now what? Remember the questions about where you wanted an article to be published on the web site? There are two things that control that:

1. Featured To be on the home page, an article needs to be "Featured". Just click on that and your article will appear on the front page.
2. Categories: Where your article lives after it's life on the front page is controlled by the category. Every single article on the website is identified by a category name (there is even a "uncategorized" category!") If you want it to appear on the On The Water menu, select that category. There are many others. Often, an article with a short life doesn't need to be anywhere after being on the front page. "News" is a good category for that.

When to Publish, when to Unpublish. On the main edit screen there is a single button for "Publish". This is used to control whether an article should be published, or unpubished, right now. For example, if you have a long article that you would like to come back to, unpublishing the article will give you a chance to come back and work on it later, and then publish when you are ready. It'll be saved there, unpublished, until you are ready to finish editing.

At the top of the edit screen you will also see tab called "Publishing and Metadata". Clicking that tab reveals a screen that gives you actual dates for when you want to publish an article, and when you want it to be un-published. Both publish and creation date will be pre-filled for you. If you don't want this article to show immediately, set the publish date to when you want it to appear on the web site. The "Finish Publishing" area can be used to make an article go away that may no longer be relevant after a specific date, such as after an event has happened. We encourage you to set that date if you can.

Title. This is probably self-explanatory, but an article won't publish without a title. Some people make the mistake of putting the article title in the article itself - that will just show the title of the article twice!

Tags. If you want to add some tags (i.e. #mycoolarticle) you can do that. We usually don't bother.

After that, you are ready to edit the actual text of your article.

EDITING: This isn't your mother's word processor!

It doesn't matter that it looks like a word processor, it isn't! Keep in mind that formatting documents for a web site is very different than formatting for a printed page. Text flows as the width of the screen gets larger and smaller, and those darned images just don't seem to want to stay where you put them!

Here are some formatting rules that you need to follow:

Spaces: Two spaces is a no-no, and using spaces to position text just won't work. I know you probably have it in your muscle memory to put two spaces after a period, but did you know that the two-spaces after a period rule was eliminated in the 50s? Just don't. 

Why?  Because after the first space a "non-breaking space" is inserted in the text. Having non-breaking spaces there  will effect how the words wrap, how justification happens and a world of other things. It's not the end of the world if there are a couple of non-breaking spaces there, but your content won't look as good.  Avoid them.

Paragraph Breaks: People get used to entering two returns after a paragraph. Did you know that even in word processors this isn't right? Paragraph spacing should be set properly in a document so only a single return is needed at the end of a paragraph. On a web page, this is a hard rule - a web document assumes that the end of a paragraph needs vertical space before the next paragraph, so it is put in automatically. If you put in two returns at the end of a paragraph, you get an extra wide space between your paragraphs. Just don't do it.

This is what is looks like

 

if you hit enter twice after a paragraph.

Breaks: There is another way to vertically space things, with a "break". The only difference is that there won't be any space between the paragraphs or lines. To get a break in Joomla editor, hold down the shift key when you hit return.

Here is a line
Here is the next line after entering a break (shift-enter)

READ MORE  If you absolutely can't avoid a long message, you should insert a "READ MORE" button after the first few lines of your article.. This gives you the ability to show some introductory text on the web site, then show the entire article after the reader clicks the READ MORE button. Putting the entire text of a long article on the front page looks bad, and it isn't compatible with some of the techniques we use to list the articles in a category.  Please try to avoid it if possible by inserting READ MORE - just position your cursor where you want the break, go to the bottom of the editor and click the Read More button. You'll see a grey bar go through your article where it will be broken up.

Tabs: People like to use tabs to space text out on a word processing document. I'm sorry to say that the concept of tabs doesn't exist on web pages.  If you want to space things out, in columns for example, you need to use tables. More on that later. Simple rule with tabs - don't bother, they won't work.

Indent/Outdent: You do have the ability to indent a block of text.

Just like this text that is indented.

Once you have clicked the indent, your text will be continue to be indented until you click the corresponding "outdent" button on the editor.

Bullets and numbering: HTML has a special set of commands for bullets and numbering, so don't bother trying to make them work any other way. Those little stars or dashes or numbers at the beginning of paragraphs just look terrible. The Joomla editor has a little icon for bullets and another for numbering. Just select the text you want to bullet or number and click the button. Just like magic!

• Here's a bullet
• here's another
  • Here is a bullet after an "indent"
• here is the next bullet, after "outdent"

1. Here is a numbered list
2. Here's another line numbered "2"
   1. Here's an indent. Numbering restarts
3. Here's an outdent after that, numbering resumes

1. You can also choose to use
   1. Letters or (in this case, TAB does work to move the text to the right)
2. Special characters

Pictures: One of the artifacts of a screen that is built to be resized is that those darned pictures just won't stay where you put them. The only option you have with pictures is whether they are going to be on the right or left, and how text will wrap around them. Don't try putting a picture in the middle of a paragraph, only place them at the beginning or the end of a paragraph, then tell the editor whether you want it on the right or left. The text will wrap around appropriately. We'll talk about how to upload pictures a little later.

Here are some examples of picture alignment:

This picture of kids in boats was inserted at the beginning of the paragraph. In the image properties, it was set to "left" alignment, so all the text wraps on the RIGHT side of the image. You can make small adjustments to the size of the image on the screen by just grabbing one of the corners and pulling it one way or the other. Also on this image, the margin has been set to "3" this keeps the text from running up against the image.

This picture was also inserted at the beginning of the paragraph (that's right, before the first word in the paragraph!) but in this case, the alignment was set to "right". In this case, all text stays on the LEFT side of the image.

It's usually a good idea to insert images at the beginning of a paragraph. Why? Because then the top of the image aligns with the top of the paragraph, which is usually more visually appealing. Is it better to put images on the right or left side? It's really up to you - some web authors like to alternate images on either side of the article to break up the text.

To add a picture, look for the little picture frame icon on the top row of the editor. Click it, and you will be shown the archive of photos and images on the web site. Here you can also upload your own picture - there are even some simple tools for editing photos. A common mistake is to upload a really big picture and then assume that setting the size of the picture reduces it's size. Well, it does and it doesn't. Just setting the pixel size of the photo will make it appear smaller on the screen, but unless the photo is actually reduced using the photo editor, the full size photo is still going to be sent to the user. That can mean slower page loading and more data usage than a user may want.

And there's some great news! With new updates to our web site software, you can drag/drop pictures into an article. You still may need to move or resize them, but it makes uploading images into an article a lot easier. The editor will resize the image as needed. You will still need to go into the image editor to set the size, positioning, and padding around the image. Just click the image to highlight, then click the little picture frame in the editing bar.

And even MORE great news! The new article editor uses the concept of "intro image" and "article image". There is a separate tab on the editor that allows you to upload images for either or both. Those images will be displayed in a spot in the article pre-determined by your friendly neighborhood webmaster. ALL ARTICLES NEED TO HAVE AT LEAST AN INTRO IMAGE, preferably both an article image and an intro image. They can be the same, but you will have to do two uploads, one for the intro and one for the full article display. You can still have other images in your article if you wish, but check to see how it looks.

Formatting: HTML has a lot of text formatting options, with the intention of keeping formatting consistent, not only on a web site but also throughout the internet. The most commonly used are "Paragraph" and "Heading". Like in Word processors, heading styles are used to keep section titles consistent, and paragraph styles carry the same text formatting from paragraph to paragraph. Using this formatting helps to make everything on the site look right. Usually, hitting enter after a heading format will return you to paragraph format, just as a word processor does.

For example:

Here is a Heading 1 Format

Here is the paragraph format after it.

Here is a Heading 2 Format

Ever so slightly smaller

Here is Heading 3

and so on...

There are also formats for addresses, definitions, preformatted text, etc. 

Erasing Formatting:  Sometimes stuff just gets messed up, particularly after a big copy/paste or something like that. Usually the best way to handle it is just to erase all the formatting in the area that's a mess. You do that by selecting the area that you want to reset formatting on, and clicking the little eraser on the top line of the editor. 

Here is some text that got ^{all screwed up! _{I really want the formatting to}} just be back to paragraph  so I can start again

... so, we select the text above and click the eraser, and we get 

Here is some text that got all screwed up! I really want the formatting to just be back to paragraph  so I can start again

Creating Content Offline: A lot of people prefer to create content offline prior to putting it on the web page. That's okay, but you'll probably find that you are spending more time fixing your document after you put it in the Joomla editor than you would've if you had just started in the Joomla editor in the first place. The Joomla editor even has a nice little icon for pasting from MS Word. Forget it. It works so poorly that you'll spend even more time fixing your content.

If you must create offline first in a word processor, use these steps:

1. Create your content (MS Word, OpenOffice or what have you).  Remember that what you paste into the web site will get converted to HTML, so the same rules about spaces, tabs, paragraph endings, etc. apply. All that stuff will end up on the web site.
2. Open up the Joomla Editor
3. Select all your offline word processor content (ctrl-a) and copy it (ctrl-c)
4. In the Joomla Editor click the "Paste as Plain Text" button.  If you can't find it, hover your mouse over the little clipboards in the upper left.
5. You will be presented with a white box.  Paste (ctrl-v).
6. Click OK.

Now you get to re-do all your bolds, indenting, numbering, bullets, etc.  Get the message?  If possible, just create your content directly in the Joomla editor.  Just remember to use that nice little "Save" symbol in the upper left from time to time.

Tables: Since the beginning of web sites, web developers have been spacing out content on pages with tables. If you really, really need stuff to stay where it is in columns, rows, etc., tables are the way to go.  You can insert a table anywhere in a document, and even nest tables within tables (within tables).  If you just want to columns to show and not the borders, you can set the border size to zero and you will just see your text.  Here's an example:

here is the Table Header row.  Notice how it is automatically bold?  That's because I said I wanted the first row to be the header	Here is the second column.  The width is automatically determined, or I can right-click on the table cell and set the width manually
This is the second row	This the second row, second column
Nested Table Row 2 Row 2 Row 3 Row 3 Row 4 Row 4 Row 5 Row 5 Two cells merged together	here is a table nested inside the first table, with no borders.  The width of this table is set to 100% and this cell is set to 50% This  is the second column of the nested table.

So, that's how you make columns or space out content on a web site!

PUBLISHING: Getting your stuff on the web site

Now that you have jumped through the appropriate hoops to get the text the way you want it, it's time to publish! But wait, just one more thing before you do: test. What are you testing for? Appearance on different screens. If you are on a desktop or laptop, it's easy, just reduce the size of the edit window (the little re-size icons at the top right of your window) and drag it smaller. Did it re-flow on your screen the way you wanted it? Great!

If you have a smart phone and/or a tablet, just have a check there as well. A LOT of people do all their web browsing on smart phones these days. It's important to make sure everything looks right there as well.

The other way to do it is to actually publish your article and look at it on the actual web site. Just publish using the following directions.

Publishing. Pretty simple, really. Just make sure the "Published" is set to "Yes". Did you set an un-publish date? Do we have to tell you again?

A note on publishing: A lot of people get nervous about publishing before their content is perfect in format and content. It's really not a big deal if you publish something and it isn't exactly right, assuming you edit it fairly soon to fix it. Also, something very important to realize: you aren't going to break the web site if your article is messed up. One of the features of CMS systems like Joomla is that the structure of the web site is separate from the content (hence "Content Management System"). Your article might not look the way you want it, but the website will continue to function just fine. 

Editing after publishing. Chances are, you went back to inspect your work after putting it on the web site and saw a typo, or perhaps some text that didn't say what you wanted. No problem, it's easy to change. Since you have publishing rights on the web site, when you are logged in there will be an "Edit" button on the top right of the article. Just click it and you will again get the edit screen. Make whatever changes you need to make, Save and Close. You're done!

HELP! A wise teacher once said, "The only stupid question is one that isn't asked". Nobody is expecting you to get these things right the first, second, or even fifth time! If you are struggling, send an email to webmaster@vallartayachtclub.org. We can walk you through what you need to do.