Kasra Yousefi

“Oh, I just can’t stop reading Kafka, he changed me forever”, The roach said.

There was silence. It was raining outside.

One of the greatest crimes of men is trying to teach something to others that he doesn’t know himself. No matter, it be a father to son, a teacher to his students or a shepherd to his herd.

If you want to understand secrets of someone’s personality, ask them to speak in a language they doesn’t know well.

When they can control what you say, they ultimately control what you think.

Those who want to return to the ‘golden ages’ of the past (and take us with them), are simply in love with their childhood. What they really want is not returning to principles, they just want to be children again.

(This article was originally published in a journal published by Idea school of design on May 2010)

Given the fluid situation of World Wide Web these days, defining what HTML 5 is and what will be in future with certainty is very difficult task for an outsider to WHATWG [1] and WC3 [2] like the author. Indeed, even Mr. Ian Hickson, editor of the HTML5 specification, expects the specification to reach the W3C Candidate Recommendation stage during 2012, and W3C Recommendation in the year 2022 or later[3]. However, “Finishing” the specification is one thing and “using” it in real world applications is another. These seemingly disappointing dates doesn’t mean that developers and designers should wait until 2022 and later to use HTML 5 in their projects; many parts of the specification are stable and usable even now[3]. However, by presenting a perspective of the whole process and it’s milestones, the author tries to emphasis that many things that will come later in this text are uncertain and due to revision in future.

What is HTML5?

According to WHATWG documents : “HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while at the same time enhancing (X)HTML to more adequately address Web applications. Besides defining a markup language that can be written in both HTML (HTML5) and XML (XHTML5) it also defines many APIs that form the basis of the Web architecture. Some of these APIs were known as “DOM Level 0″ and were never documented before. Yet they are extremely important for browser vendors to support existing Web content and for authors to be able to build Web applications.”[4]

This brief introduction clear up many essential aspects of HTML 5. Most important for designers is that it will supersede all previous versions, there are no forks and the syntax is driven from XML (like XHTML) and supports old HTML style.

Design Principles

According to W3C working draft[5] on HTML5 (26 May 2009), the main design principles of HTML 5 are:

Compatibility: Support Existing Content, Degrade Gracefully, Do not Reinvent the Wheel,Pave the Cow-paths, Evolution Not Revolution

Utility:Solve Real Problems,Priority of Constituencies,Secure By Design,Separation of Concerns, DOM Consistency

Interoperability: Well-defined Behavior, Avoid Needless Complexity, Handle Errors

Universal Access: Media Independence, Support World Languages, Accessibility

Stated principles show that W3C is willing to continue the same pragmatic and easy to use pathway it used for previous versions of HTML. In addition, given the fact that the HTML 5 is adding numerous brand new features and elements, there is an emphasis on how the new elements degrade gracefully when presented using older user agents.

Browser support status

The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features [6]. For detailed information on each layout engine, you may visit: Comparison of layout engines (HTML5) in Wikipedia [7].

New features highlights:

The video and audio tags for media playback

Before arrival of HTML 5, there were no standard way to play audio and video files inside an HTML document, which in turn made the Adobe Flash based players very popular. However, using HTML 5 <video> and <audio> tags, it’s easy to present these forms of data using a standard method.

Video:

Using the easy to use, new <video> element, which degrades gracefully you can play Ogg [8] and MPEG 4 [9] video files:

<video src=”my_movie.ogg” width=”320″ height=”240″ controls=”controls”>

Your browser does not support the video tag.

</video>

Supported video formats

Currently, there are 2 supported video formats for the video element: Ogg and MPEG 4. Ogg is supported by Firefox 3.5, Opera 10.5 and Chrome 3.0 and MPEG 4 is supported by Chrome 3.0 and Safari 3.0. That makes Chrome 3.0 the only browser that currently support both formats. Internet Explorer 8 does not support any video tag and format. IE 9 will support video element using MPEG4.[10]

Audio:

HTML5 specifies a standard way to include audio, with the <audio> element. The <audio> element can play sound files, or an audio stream.

<audio src=”my_song.ogg” controls=”controls”>

</audio>

Supported audio formats

Ogg Vorbis is supported on Firefox 3.5, Opera 10.5 and Chrome 3.0, MP3 is playable on Chrome 3.0 and Safari 3.0, and WAV files are supported by Firefox 3.5, Opera 10.5 and Safari 3.0

Being always late to the party, Internet Explorer 8 does not support any audio tag and native format, but it promised for IE 9.[10]

Playing audio on various browsers:

The audio element allows multiple <source> tags inside the <audio> tag. Source tags can link to different audio file URI’s. The browser will use the first recognized format. Notice how the code degrades gracefully, if browser being incapable of playing any of the audio formats:

<audio controls=”controls”>

<source src=”song.ogg” type=”audio/ogg”>

<source src=”song.mp3″ type=”audio/mpeg”>

Your browser does not support the audio element.

</audio>

The canvas element for drawing

The <canvas> tag

The HTML5 <canvas> element uses JavaScript to draw graphics, similar to display programming features exist in Adobe ActionScript 3 programming language used in Flash.

A canvas is a rectangular area that has various methods for drawing paths, characters, and placing images.

Here is an example of a <canvas> element:

<canvas id=”myCanvas” width=”200″ height=”200″></canvas>

However, canvas tag itself doesn’t do any drawing and it completely controlled by Javascript:

<script type=”text/javascript”>

var c=document.getElementById(”myCanvas”);

var cxt=c.getContext(”2d”);

cxt.fillStyle=”#FFFF00″;

cxt.fillRect(0,0,120,70);

</script>

JavaScript uses the id of the <canvas> element (which in this example above is myCanvas ) to find the canvas element:

var c=document.getElementById(”myCanvas”);

Then, create a “context” object:

var cxt=c.getContext(”2d”);

The getContext(”2d”) object is a built-in HTML5 object, with various methods to draw paths, boxes, circles, characters and images.

The next two lines draws a rectangle in yellow:

cxt.fillStyle=”#FFFF00″;

cxt.fillRect(0,0,150,75);

The fillStyle method define the fill color (yellow),and the fillRect method defines the shape, coordinates and size.

Other important improvements

Covering all the new features and improvements is not possible given the size of this text. The author will try to provide more in-depth articles in future covering some other aspects of HTML 5 including:

- Better support for local off-line storage

- New content specific elements, like article, footer, header, nav, section

- New form controls, like calendar, date, time, email, url, search

Will HTML 5 kill Flash?

HTML 5, is a promising step toward a more usable, semantic and media-rich web. It also will help reducing the need of plug-ins like Adobe Flash , Oracle’s (Formerly Sun Microsystems )Java , Microsoft ’s Silverlight and other similar virtual machines for playing audio and video content, which is most welcomed.

In addition, the rise of HTML 5 created a very interesting debate on the usefulness of technologies mentioned earlier which depend on downloadable virtual machines as browser plug-ins. The technology that is receiving the largest amount of criticism is Flash, with shortcomings (declared but not mostly proved) in areas like CPU usage, battery usage, lack of multi-touch support,lack of openness, usability issues and of course, inherent problems of a system that relies on a virtual machine plug-in. Even as some independent reviews indicate that some of these problems will be resolved or minimized when the upcoming (10.1) version of Flash player comes out of beta stage[11],[12], the supporters of using the HTML 5 in place of Flash are vocal more than any other time before.

Being a user and tutor of both HTML and ActionScript, the author point of view on this issue simple and inclusive: HTML should not become a solution for every need web users have, and it’s better for everyone that HTML acts as an essentials-only platform that let plugins do more specific tasks. This strategy keeps the HTML focused on it’s core mission (which is the case so far), usable and understandable to a world that not everyone necessarily knows what terms like “Javascript events” or “H.264” mean. After all, letting people add features as plugins to the user agents is “the real” promise of openness, not refusing them to extend their user agents as they wish.

Should we stop teaching and learning Flash?

The answer to question whether it’s wise or not to invest on learning ActionScript, the author believes regarding the similarity of ActionScript and JavaScript (ActionScript is written based on Javascript) , learning Flash’s programming language is still one of the best ways to learn object oriented programming, use Flash’s powerful multimedia features and even use your knowledge to better understand and use the new exciting features of HTML 5.

——————————————————————————————-

Footnotes:

[1] Web Hypertext Application Technology Working Group

[2] World Wide Web Consortium

[3] http://wiki.whatwg.org/wiki/FAQ#When_will_HTML5_be_finished.3F

[4] http://wiki.whatwg.org/wiki/FAQ#What_is_HTML5.3F

[5] http://dev.w3.org/html5/html-design-principles

[6] http://www.w3schools.com/html5/html5_intro.asp

[7](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29)

[8] Ogg is a free, open standard container format maintained by the Xiph.Org Foundation.

[9] MPEG-4 is a patented collection of methods defining compression of audio and visual (AV) digital data.

[10] http://www.theregister.co.uk/2010/03/16/internet_explorer_unveiling/

[11] http://www.anandtech.com/show/2876

[12]http://www.techtremor.com/2010/05/11/flash-10-1-runs-like-a-champ-on-android-2-2/

Introduction

Designers usually tend to avoid working directly with the Adobe ®Flash® programming language called ActionScript®, because there is a misconception that programming in general, and object oriented programming in particular, are complex subjects in realm of software engineering, not art and design.

Contrary to general belief, object oriented programming and design fundamentals are easy concepts to learn and all the core concepts can be explained roughly in a single short session. In the following text, I’ll try to explain the basics of OOP in the simplest form for designers who are interested in learning an OOP language in order to prove my point. Let’s begin!

Define the problem before solving it

Another common stereotype about programming is that every program consists of a flowchart-like set of procedures like this:

1-Do task A

2-Do task B

3-If we still didn’t reach the results, go to line #1

4-Do task C

While this is not completely untrue, in reality solving every problem using flowchart-like procedures creates great complexities. For Instance, just imagine the complexity of breaking down the activities of a car driver when starting a car into a flowchart.

0-Search for your car

1-Go to your car

2-Is it your car?

3- If so, take out the key

4-if negative, go to line #0

5-…

You can clearly see that we can create a book as thick as an encyclopedia and still be unable to begin defining the actual activity of driving. In other words, procedural problem solving is a weak tool for modeling the complexities of the real world. That’s why developers call complex procedural programs “Spaghetti code”!

OOP to the rescue

OOP approaches the real world problems by breaking them down into “objects”. The meaning of the term “object” in OOP is very similar to its meaning in the physical world; Objects, say, a car, have properties like color, material type, name, physical dimensions and owners. Some objects can be broken down into smaller subsets of objects. For[R1] example, in case of a car, we can break down it into gearbox, steering wheel, engine, etc. However, for the sake of simplicity, sometimes we prefer to “see” the entire set of related objects as bigger object which have grouped the entire smaller objects inside it. Also note that each part of a car doesn’t necessarily “know” about inner workings of another part, but they all work together. Developers call this feature “encapsulation”.

Objects can produce “events” like “brakes active”,” door open”, “airbag active” . In addition, you can control objects by predefined “statements” (i.e. commands) which developers call “methods”, like ” start”,” stop”, “accelerate” or “turn left”. Please see the basic possible structure of a typical object:

Object:

Car:

As you can see now, starting a car, in this case our red Ford, can be easy as this:

car.start();

In this example, “car” is the object, “start()” is the method, the dot(.) indicates that we are activating the start() method of the car and finally, semicolon (;) indicates the end of our statement.

Now let’s see how we can change the car’s color:

car.color=”red”;

As you can see, we changed the property color of the car object to red.

We can also define our car a little more:

car.brand=”Ford”;

car.maximumSpeed=150;

car.hasAirBags=true;

car.currentSpeed=0;

Event listeners and Event Handlers

Now let’s see how we can check if our car is running. First, we have to attach a “Listener”, something which actually “listens” to the event like a sensor, to the car:

car.addEventListener(EngineEvent:running, announce);

Developers call this statement an” event listener”. The statement attaches a “listener” using the addEventListener “method” or statement. This method listens to see if the “running” event is triggered. The “running” event is inside the subcategory of “EngineEvent”. When the event actually happens, the “announce” function will be activated.

The function is a block of code which actually does the thing we want to do when the event happens. We call this block of code an “event handler”.

function announce (eventObject:EngineEvent):void{

Trace (“car is running”);

}

The function name is “announce” and the event type that it will accept for processing is “EngineEvent”, because back in the previous line of code we stated that we want to listen to that specific type of event. Please ignore the “:void”, because it’s not directly related to our discussion. Inside the curly braces { } , which define the beginning and end of the function, is the statement that we want to activate when the car actually starts running:

trace (“car is running”);

The trace statement is a simple but very useful ActionScript® statement that simply prints what we enclose inside the parentheses, which in our case is a string (A set of characters or numbers) announcing that the car is running.

Now that we know the trace statement, guess, what this statement will do?

Trace (car.maximumSpeed);

The result is the number 150, which we assigned earlier in our code.

As the last sample of code to show you how easy OOP is to understand and use, guess what this block of code will do?

i

f (car.currentSpeed>car.maximumSpeed) {

trace(“Warning, You are exceeding car’s maximum speed!”);

}

Conclusion

Now, imagine every element of a Flash animation or application you see is an object or a set of objects that are grouped together; a player in a game, a user in an application or a movie that is played inside a flash animation are all examples of objects. These objects can have their own properties, events and methods just like the car we used as our example.

Like a child that learns how to interact with the real world objects one by one, learning flash objects are a step-by-step process. However, before that, you should learn the syntax of the ActionScript® language, issues like when and why to use dots, curly braces and correct character cases and also study more about the fundamentals of OOP.

I hope this short article has encouraged you to enter the interesting world of working with multimedia projects, using OO ActionScript®.

This work is result of one of my rarest moments when I had time to work for myself, not for a client.

Software : Chaoscope and Photoshop ®

Here is one of my recent works for a magazine advertising campaign for Hansa, that’s a gift/accessory/writing instrument brand:

No matter on which front they are taking pictures- I believe – photo journalists, particularly war photographers are among the bravest of mankind, those type of people that make you ashamed of yourself (and your Rolex watch), and make you regret of your weaknesses.

Whenever I see the photos of James Nachtway I think to myself: “where did I go wrong? When did I fail? Why am I here?”

I’m a designer; I spend long times working on advertising concepts, help selling a product. I know I am useful to some extent for the society – bringing taste to people’s lives - but in comparison with what these people do, and the way they used their artistic talents for the good of human beings, I feel I’m doing nothing for the society.