/ ~hypervariety /

Text (14589 bytes)
Saved 2 months ago
welcome
Push esc to read the page. Hold Ctrl/Alt/Opt to edit elements on the page.
Or drag a box to create new ones.
Sign in and out   Your home page ~ / Your files

Welcome to Hypervariety!

Welcome, new friend. What is your name?

Hi . In this document I introduce Hypervariety, a creative new tool for expressing and sharing your thoughts online. Don't be afraid . What you see is what you get and there's no need for real technical skill. If you can keyboard, you can Hypervariety.

So let's begin. As a learning aid, you have the ability to edit the dotted areas. You can click into the fields and change things. It's a great way to get a grip on anything unclear.

1. About HTML markup

The idea of markup is pretty simple: text, interspersed with tags between < and >. Most tags are designed to style text, and need an end tag so the browser knows where to stop.

<B> Bold tags </B> <I> italic tags </I> ...you get the idea <font color=red> Red font color</font>
will display in the browser as

The HTML page, stored as markup, is plain text because it's easy to edit and view. When the page loads, the markup stays behind the scenes as the browser displays the text with the requested styles.

2. More tags

Tags also help with laying out the text so it's less monotonous. You can achieve nice effects with a little variety. One tag I've been using in this demo is <p> for paragraphs. <p> breaks the line and puts a little space before the first word, and can do other things. You don't need an end tag for it.

The 'headline' tags <h1>, <h2>, and <h3> apply a large, sorta-large, or kinda-large size to their contents. They also expand left and right so the headline is on its own line. I've been using them for titles.

<B>, <I>, and <U> are a famous trio, and <s> puts a line across the text. <sup> raises, and <sub> lowers, for math (RL2) or footnotes[8].

  1. Now this text is in an <ol> tag.
  2. Each line automatically gets a number.
  3. There are many nice options:
    1. You could use letters. (See?)
    2. You can start at other numbers than 1.

The tag <a> puts links to another page where the reader can click. And for some flourish, a tag called <font> lets you directly control text size, color, and face. Check with your doctor!

3. Paint

Not every idea should be expressed with text. Maybe you want a diagram? Or you just need to express yourself! The <canvas> tag lets you work some visuals into your document. It uses browser power to see the mouse or your finger.

[This canvas is loading...]
 

4. The Cloud

The changes you make to the fields and the art you drew on this page are saved automatically to the local storage of the browser. You can quit the page and come back and the browser will reload the page as you left it. But why stop there? Hypervariety allows you to set up personal accounts on my secure server. Then you can log in from any other browser or any other computer or device, and read and write the same data.

I even support a limited form of publishing, so others can go to your page, and even leave comments. It's way cool! Click here to see the account options. It's free, anonymous, and fun!

5. Buttons, Fields, and Forms

The classic control is a <button>. . Click it to make something happen. Some other controls are checkboxes, radio buttons, and popup menus.

When some text ought to be editable, you generally use a <field>. Besides run-of-the-mill word processing, you can have styled text in the field. But that's not all: Hypervariety fields support modern, fresh features like smart formatting based on their contents! Here's a field that looks for color names inside.

Red, orange, yellow, green, blue, purple
And here's a field that will do simple arithmetic for you and put the result on the right side.
(1+2) * three plus five

Although saving the site visitor's field changes is generally useful, and easy in Hypervariety, you may want to be more elaborate. You usually want to use a <form> tag then. Forms give you organizational control over their contents; you can move the whole group around the page, submit their values to a server for processing, and more.

5. Instructions

HTML has a feature, called JavaScript, that is a full-featured CPL (computer programming language). It's tough to start learning, and even an expert like me has to constantly fight to use it well. Of course, this is the only way to do anything interesting in a web browser.

Hypervariety provides a workaround for this. Instead of programming, you write Instructions, which are plain-English sentences that do what they say. A converter turns them into Javascript, which you never have to look at, and the browser is happy.

You can attach Instructions to buttons, fields, canvases, and forms. There is an excellent editor to read and write, and a lot of great features are included, along with documentation and examples in my trademark easy-to-read style.

6. Editor

All of this ties together in a nice editing environment for your documents. You can enjoy the convenient online version, and you can also download the desktop version (I'm tidying this more before any public release).

Your own projects—that is, the pages that you write—are owned by you, and you are assumed to hold copyright. Of course, my own web server could be struck by lightning, so there is a feature to download all of your cloud files, as a backup or to copy to your own server for private publishing.

Conclusion

Thanks so much for looking at my creative work. I've been interested in realizing an idea like this for a long time, and I'm thrilled to finally show off what I've been doing. Good luck with your own projects! ~Dan

Editing is enabled
Learn about instructions Hide the box