Review: Creating HTML 5 code fast and simple with Hype

Creating a web page or site used to be simple: you would enclose sentences in HTML code, and the code would only differ based on structural decisions: a paragraph, a heading or a list perhaps. Later on, when web page designers wanted to improve the looks of a page, they added Cascading Style Sheet (CSS) code. Meanwhile, HTML evolved and became XHTML in its last iteration. And now we are entering the HTML 5 era, an era in which we can move objects around on the page with ease. With ease, you say? With an application like Hype, perhaps, but not if you have to hand code.

The truth is that all the eye-candy HTML 5 is capable of requires not just HTML code but also CSS and Javascript. In order to move a rectangle as a result of a button being clicked on, you still need to write Javascript and some complex HTML and CSS code. There is an easier way now: Hype by a small Mac OS X developer. Hype is not the new Sandvox or RapidWeaver, nor does it want to be. It’s targeted at creating animated and interactive content in HTML 5 without ever needing to write code at all — and it does this with bravado.

The Hype document window is a blank canvas with a timeline running underneath and a scene list running above. The canvas is also called the scene editor; it’s where you create and change scenes. Scenes are like slides in a PowerPoint presentation. For example, if you want to show a text box when a visitor clicks a button and you want that text box to disappear when the visitor hovers over another button, you’ll need to create a scene for each action.

The Hype canvas

The timeline is another dynamic element in Hype. Each scene can have multiple timelines. If you want to create a really simple scene, you can have a couple of timelines that run when specific actions occur, e.g. a button being clicked. In the example I used earlier, you could make a different text box appear for each button the user clicks on the page, but each box would stay visible after having been ‘launched’.

Timelines automatically duplicate all elements on them. Scenes do not, but you can duplicate scenes with or without animations. The idea — if I understand it correctly — is that a timeline is meant to keep all elements on them at all times, no matter if you make them invisible or not, while scenes can have totally different elements.

A good example of this would be a navigation design where each scene consists of a different navigation set. Clicking on a button could take you to the following navigation set (which is a scene) and so on.

The decision to create different scenes or multiple timelines, or both, must be about the most difficult aspect of Hype. And difficult is relative: once you know the drill, you can repeat it endlessly. However, it must be said: although there are a couple of tutorial videocasts to teach you the basics, the choice between scenes and timelines is not all that well explained. Being the novice with the application that I am, I had a bit of trouble to create a “switch” — a button that would switch a text box between visible and invisible.

I needed some help with that, and much to my surprise my solution only took one extra step that I kept overlooking. However, the help was swift and to the point, and I wouldn’t be too surprised to see more tutorial videos from the developer and his team soon.

Hype’s HTML elements meanwhile are relatively basic: a box, a text box, two types of buttons, video and image. All of these elements can be positioned and moved around on the canvas much the same way as with an illustration program, including the alignment and “move to back / move to front” menu items. Boxes and text boxes can have rounded border corners, colour, image, and gradient fills, and shadows. And if that isn’t enough for you, you can also directly change the HTML in the canvas. I used this functionality to quickly turn a regular text box into a box with a list.

Inspector

Animating elements is comparable to how you animate in Adobe After Effects. You mainly work with keyframes, with the animation in-between being automatically interpolated (tweening). About every CSS property can be animated, so you can dynamically change opacity over time, but also borders, backgrounds, positioning, etc.

If you don’t know how to create keyframes manually, and you’re too lazy to read the quick start guide, you can just hit the Record button and change the properties you want; Hype will do the rest. Furthermore, you can create abrupt transitions or ease-in/ease-out — there’s a HUD to change that behaviour per element.

Finally, animations make use of a concept called relative keyframes. This implies that objects will never jump, even if you’re using multiple timelines for the same object, same property. The next timeline will simply take off where the previous one ended. It’s an important concept to understand when working with Hype.

Exporting a Hype document is easy, but you can set a few options. For example, you can choose to save a HTML file that will overwrite the last HTML file you exported. You can create an enclosing folder and a small watermark that gives Hype credit. The generated document is ready to use as a web page, but if you copy the code between the commented parts in the HTML file, you can paste that in any sort of web page (including WordPress templates, etc).

To make the HTML code work, you’ll also have to upload the Javascript files Hype generates. Alternatively, Hype allows you to set up your Dropbox account within the program so you can upload files without thinking.

Last but not least, Hype offers a Javascript API to control various aspects of a document. The API methods can be called during user-generated events from within a Hype document or by a script that is external to the Hype document. I didn’t try out this functionality, but it’s clear this requires a bit more knowledge about Javascript than using Hype by itself and on its own.

Clearly, Hype is a tool that fulfills the need to rapidly create engaging web content and design without having to learn any code at all. The program is user-friendly and simple to use, and even if you don’t know the first thing about Javascript, you can create stunning dynamic pages. The room for growth that is offered with the API is a nice extra.

Hype is a one of a kind program that I believe will save a lot of time for developers both beginners and experienced people. It’s also the first of its kind and it’s available now, for approx. 22.00 Euros.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s