The building blocks of a HTML5 web page
Before getting into the specifics of using Radi, let’s first look into what exactly it is that we can create using Radi. One short answer is: “Modern web pages in HTML5”… But as you’ve probably noticed, there's a lot that can be done within a web browser today. In order for this answer to be useful, we need to narrow it down a bit. We’ll start with the essentials: what is HTML5, and what does a modern web page consist of?
A major focus area of the HTML5 standard is multimedia. The original HTML had very limited support for rich visual content, and this left an opening for browser plugins to fill the “multimedia gap”. For a long time, Adobe’s Flash plugin was the de facto solution for presenting animation and video on the web. HTML5 brings official standard solutions to fill this gap. Now web pages can finally have dynamic, rich graphics and video without having to resort to the Flash plugin that is not available everywhere (most smartphones don’t have it, for example).
Two crucial parts of HTML5’s multimedia support are the Canvas and Video elements. You’ll encounter these everywhere in Radi, so these are essential concepts. To understand how these fit into the larger picture of web development, we need to examine the composition of a web page: how does the browser decide what to display, and what options does a web designer have for creating dynamic content? A pageful of elements
A web page is essentially a bunch of text that has been “marked up” with different tags. For example, the above heading could be marked up as “small heading”, and this paragraph of text could be marked up as simply “paragraph”. When the web browser encounters these tags, it knows that it should render the heading differently from the ordinary paragraph. (In HTML, the tags are written with angular parenthesis, so the tag for “small heading” would be <h3> and the tag for “paragraph” would be <p>. You don’t need to know any of this to use Radi, but it may be helpful to know as tags are commonly discussed in the world of web design.)
When the browser sees the text and the tags, it creates a visual representation of the document. Most HTML tags represent elements that become directly visible on the page – for example, the above “small heading” is an element of its own, and each paragraph also becomes an element. These elements are the real building blocks of the web page. In addition to text, the traditional HTML standard includes elements for images and tables, as well as a few elements that don’t have a direct meaning but can be used to group other elements together. The <div> element is commonly used for this purpose of creating "blocks". When this handful of elements is complemented by CSS styles to define positioning and margins, it’s possible to build fairly complex layouts in HTML4 using just these pieces. Below is an example of a traditional HTML4 web page as seen in a web browser window:
New motion elements
HTML5 breaks this limitation with new elements that can contain custom visual content in full motion. Because they are dynamic in nature, it’s hard to capture them in a still picture, but here’s an attempt at an illustration anyway:
(This illustration shows only new kinds of elements, the old ones from the previous HTML4 example are of course also usable.)
In the above illustration, one of the Canvas elements is shown overlapped on top of the Video element. This is an important point – the Canvas doesn't have to be a solid box, but it can be a transparent layer that is visually connected to another element. In the illustrated example, this “overlay” Canvas might be an animated logo that’s sometimes shown on top of the video and otherwise it’s completely transparent.
The Image element and various text elements are the building blocks of traditional web content. Similarly, the Video and Canvas elements are the foundation of multimedia web content. Using them together with traditional web techniques, a web page can now render most kinds of content that would previously have required plugins like Flash. (Better yet, each browser and device can use their own best implementation for multimedia tasks: for example smartphones are able to use their specific video acceleration hardware to play HTML5 Video content, and many new desktop browsers are able to make use of graphics processors to accelerate Canvas content. These browser-specific optimizations are not going to happen with a plugin that is owned and developed by a single vendor.)
Elements and layers in Radi
The previous subchapter covered the essential ground concerning the elements found in HTML, both the “traditional” version 4 and the new version 5. Now let’s look at how these elements are made available in Radi. Along the way, this subchapter will provide a short overview of the capabilities of Radi.
In Radi, the document workspace shows the web page being edited. Within this page, you can place any number of HTML elements. In Radi these are called top-level elements. When the web page is published, these will become actual HTML elements.
Radi is a flexible environment that tries to fit your content into whatever top-level element you have placed it in. Naturally, the choice of element can greatly affect the rendering of the content: an Image element can’t show animations, to choose an obvious example. In practice, element capabilities can be subtle and less obvious. For example, placing the same animated content in a Canvas or a Video element can often look the same in Radi, but in the web browser it makes a great difference as the Video content has necessarily been rendered into a file whereas the same content in Canvas will be rendered on the fly within the web page. Hence it’s very important to understand the capabilities of elements when working in Radi (or indeed when creating any HTML5 content in general, as the same concepts apply to all web design).
The choice of element is important, but it’s something that you perhaps only do once when starting out a new document – elements are not the pieces that you typically would interact with in Radi all the time. For that, Radi has more fine-grained tools.
To create image compositions and animations, Radi uses the notion of layers. These are like transparent slides. When layers are placed on top of each other, they create a combined image. If you’ve used Photoshop or Flash, you’re already familiar with layers. (The layers in Radi are quite similar to the ones in Photoshop: they come in a few different types such as image, text, shape and adjustment layers. One major difference is that, unlike Photoshop, all the operations in Radi are non-destructive – any edits made or effects applied always remain editable and animatable.)
Layers are sometimes called content layers in Radi, to differentiate them from the top-level elements. Even though elements are also layers in the sense that they can be placed on top of each other, they are fundamentally very different. By themselves, elements are always empty – they need layers to provide them with content to render.
Elements are therefore containers for layers. One possibly useful way to think about top-level elements in Radi is to imagine them as “mini-apps” for web publishing. Each element does a job for which you previously might have used a separate app:
- The Image element can be used to design images, i.e. it replaces an image editor.
- The Text block element replaces a text editor.
- The Video element does video conversion and effects, so it can replace even several apps.
Because content layers are independent of elements, you can operate all these “mini-apps” in the same way and within the same interface. The integration in Radi goes deep, but often you need some awareness of which “mini-app” you’re working with.
Overview of top-level elements
The next chapters will go into more detail concerning all the practicalities of how to create top-level elements within the Radi user interface. For now, we’ll just go over each type of element.
Text block element (a.k.a. “Block” for short)
A block of text – the original type of HTML information. Although Radi is not primarily a word processing or page layout app, it has sufficient capabilities for placing and editing short texts for a web page. It’s possible to choose fonts, colors, margins and other basic style properties. When writing text in Radi, you don’t need to write raw HTML directly. Instead you use a simple text format called Markdown, where styles like headings and bulleted lists are presented in a minimalistically simple and readable way. <text editor screenshot>
A still image. Although motion content – animation and video – is a major new feature in HTML5, you can of course use Radi to create still images as well. All the same tools are at your disposal regardless of whether you’re building something in an Image element or a Video element. (Because Radi allows content to be easily moved from one element to another, you could always start creating a still image, then decide to convert it into motion later.)
A movie – more specifically, a sequence of images and a soundtrack. (More detail forthcoming.)
A container for vector animation and dynamic graphics. (More detail forthcoming.)