Personal tools

The building blocks of a HTML5 web page

From RadiWiki

Jump to: navigation, search

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?


Contents

HTML5 explained

HTML (Hypertext Mark-up Language) is the foundation of the web. It is a standard that defines the format of documents that web browsers can display. Because HTML can only be used to format the content of static documents, it is complemented by two other important web standards, CSS and JavaScript. CSS, Cascading Style Sheets, allows the creation of stylesheets that define the appearance of a web site. JavaScript is the dynamic programming language that allows web developers to create interaction within the web browser. Thanks to JavaScript, the web has been able to progress from simply displaying static document pages (like the kind you would export from Microsoft Word) to elaborate web apps (such as Facebook).

HTML5, then, is the latest version of the HTML standard. It’s a big deal because the previous version of the standard came out a long time ago, back in 1998 – this version 5 represents over a decade of the web’s evolution that browser vendors have finally agreed to support on a common basis. (But HTML5 is also somewhat of a misnomer, as many of the things that you can do on a “HTML5” web page actually depend on the latest version of CSS and a modern JavaScript engine. Most people would agree that writing “HTML5 + CSS3 + JavaScript” gets cumbersome after a while, and hence HTML5 has become the agreed name to indicate this next level of the web.)

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:

radi-browser-example-html4.png


Looking at the above illustration, it’s clearly more similar to a word processing document than a graphical canvas like you might find in multimedia applications. Over the years, web developers have worked hard to overcome some of the limitations of HTML4. For example, JavaScript has been used to dynamically change CSS properties such as position, which allows elements to be animated within the web page. This was (and remains) a very useful technique, but it can’t change the fundamental limitation that all the available elements in HTML4 are blocks that can contain text or images, but nothing else. It’s like building a sculpture out of Legos: there’s only so much that you can do with rectangular blocks that snap together in a predetermined fashion.


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:

radi-browser-example-html5.png

(This illustration shows only new kinds of elements, the old ones from the previous HTML4 example are of course also usable.)

The new Video element is easy to explain. It’s a lot like the existing Image element which displays a picture file, but it displays a video file instead. The major difference is that video needs playback controls – the user should be able to play, pause and skip within the video. Hence the Video element offers a standard set of controls which will be displayed on top of the video (unless the web designer chooses not to show the controls, in which case it’s possible to either play the video automatically or by using custom JavaScript controls).

The Canvas element is Video’s dynamic counterpart. We can think of Video as essentially a player that displays pre-recorded content from elsewhere – the video stream needs to come from a file on a server or a stream address, but it can’t be rendered by the web page itself. Canvas works the other way around: it doesn’t have the ability to autonomously display any external content, but instead its contents must be rendered by the web page that contains it. (In practice this happens using JavaScript. Normally you would need to be a programmer to do this, but when you create Canvas-based content in Radi it’s all managed automatically behind the scenes, so you don’t need to know any JavaScript to get things happening within Canvas.)

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.

Canvas is a low-level foundation for dynamic graphics. By itself, it offers only a minimum set of primitive operations such as drawing lines, polygons and pixels. It’s up to the web developer to decide how to compose these basic operations into something more useful. Some examples of web apps that have been made using Canvas include various types of 2D games and painting programs. With Radi, the applications of Canvas are now expanded to include animation design. You can create scalable vector animations visually on a timeline and publish them within a Canvas element on a web page. If you’re a programmer or interested in learning about dynamic graphics, you can also create your own JavaScript programs as layers within a Radi composition and they’ll render seamlessly within the same Canvas element as the animations on the Radi timeline.

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.
  • The Canvas element can do both Flash-style vector animation and JavaScript graphics programming that previously would have happened in a text editor with no feedback.

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>

Image element

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.)

Video element

A movie – more specifically, a sequence of images and a soundtrack. (More detail forthcoming.)

Canvas element

A container for vector animation and dynamic graphics. (More detail forthcoming.)



This was Chapter 1 of the book Learn HTML5 Multimedia With Radi.
Go to the next chapter →