Chapter 3. Usage

A real example

We'll start with a real example. Below you can find a text that we'll format using schema.org attributes:

Example 3.1. Plain HTML (no schema.org microdata)

<div>
    <h1>Avatar</h1>
    <span>Director: James Cameron (born August 16, 1954)</span> 
    <span>Science fiction</span> 
    <a href="http://www.example.com/movies/avatar-theatrical-trailer.html">Trailer</a>
</div>
            

Create a new article and paste it inside you editor. Now select all the text and press the J4Schema button

[Tip]Tip

When selecting a text, the best thing to do is to click on the container element on the editor status bar. In this way you'll get the opening and closing tags, too.

A new window should open: that's the J4Schema core! Here you'll add and manage your microdata attributes. Let's try to figure out all the options that you have.

The interface

1. Selection area

This area displays the text you have selected, every change you made to it (adding schema.org attributes, editing the text or the HTML and so on) will be pushed back into the editor.

When adding a new itemtype or attribute, select the text you want to update; in this way chenges will only affect the selected one, not the entire text.

However, the current "working" text is displayed in the Current selection area.

2. Type tree

Here you can find all Schema.org types, organized into a tree. Every time you select a type, the attribute tree will reload itself and will show the avaible attributes.

3. Type description

A short description of selected type.

4. Attribute tree

This tree holds all the avaible attributes for the selected type and its parents.

5. Attribute description

A short description of the selected attribute.

6. Attribute possible values

When more than one value could be choosen, here you'll find a list of options, according of what you selected. Here it is a list of possible outputs:

  • No options The text you just selected is the only possible value for this attribute.

  • The attribute could be another itemtype The attribute you selected can be a plain property or another itemtype block, you may want to choose the last option, so you can add more of its properties inside.

  • Time/duration specification You have to translate a date (i.e. "January, 1st 1970") or a duration (i.e. "3 hours") into the ISO format; just complete the two fields and you're ok, J4Schema we'll do the rest.

  • Multiple itemtypes Selected text can refer to more itemtypes, you have to choose one and if you want to create a new itemtype block or just a property.

7. Type/Attribute configuration

When selecting an attribute, you can choose to add it to the current element, or wrap it with a <div> or <span> element.

[Note]Note

If you choose to add the type/attribute to the current element and there are no elements on the "working" selection, J4Schema will wrap the text with a new <span> element.

8. Current Selection

This box shows the current selection (a.k.a. the Working selection); when you add types/attributes, every change will affect only the text that is in this section.