Archive

Archive for the ‘CSS’ Category

HTML5 Canvas Element Guide

August 12, 2013 Leave a comment

HTML5 <canvas>

The HTML5 <canvas> element has a unique history. But we are not going to focusing on element history. The <canvas> element takes a bit of work to understand and, unlike your usual run-of-the-mill HTML elements, requires more than just static markup and styling. In this guide, will start with basic understanding of the canvas element and what kinds of things are required and expected in its associated code. This should help you to get a firm fundamental understanding of canvas in preparation for creating something interesting and powerful with this unique and other HTML5 elements.

Maybe you heard about HTML 5 Canvas API, but don’t know what it’s good for?  It’s the way to go if you want to code an HTML5 game? Or it gives you explicit control over drawing in your browser?  So what does all that mean? Just what is the HTML5 Canvas API?

Let me pull back the curtain a little and give you some insight into what the HTML5 Canvas API is all about and what it can do for you and your web apps.

The HTML5 Canvas API is a procedural drawing API for JavaScript.  It’s well supported in all major browsers including Internet Explorer (starting with version 9) and is defined by the HTML5 Canvas W3C specification.

Also from Wikipedia you will get the detailed definition of <canvas> element as:

“Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.”

Here are just some of the capabilities at a glance:

  • Defining Paths with lines, curves, arcs and more…
  • Filling and Stroking Paths
  • Clipping to a Path
  • Filling and Stroking Text
  • Affine Transformation (Translate, Scale, Rotate, Skew)
  • Fills using Gradients and Patterns
  • Pixel Manipulation
  • Offscreen Rendering
  • Rendering Blurred Shadows
  • Dashed Lines, Line End Caps and Joins
  • Exporting Canvas Rendering to a PNG or JPEG

First of all the HTML5 Canvas is a browser DOM object and can be added to your webpage either declaratively through the <canvas> tag or programmatically through the createElement method.  Once defined it contains a frame buffer bitmap at screen resolution that is the same width and height of the canvas object itself.

As the element has some complexity so will start with markup.

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

Above tag in your HTML page will create a canvas object on your page, that is 200 pixels width and 200 pixels height and it will be transparent.  The DOM object associated with the canvas object doesn’t directly have any drawing methods.  In order to actually draw on the canvas, you have to obtain a drawing context object by calling the canvas’s getContext method with a string parameter of “2d”.

//Get reference of canvas object
var canvas = document.getElementById(“canvasId”);
//Get reference of canvas 2d context
var context = canvas.getContext(“2d”);
//Display filled rectangle on screen
context.fillStyle = “rgba(0, 0, 255, .5)”;
context.fillRect(25, 25, 125, 125);

Drawing Rectangles and Paths

The context object returned contains the actual drawing APIs that allow us to draw on our canvas object.  The 2D context allows for the use of a number of different drawing methods and properties, each utility syntax familiar to experienced CSS and JavaScript developers.

//Define path in the shape of triangle with the moveTo and lineTo methods
context.beginPath();
context.moveTo(400,50);
context.lineTo(50,400);
context.lineTo(400,400);
context.closePath();

// Fill the path
context.fillStyle="red";
context.fill();

You can get in details information about Colors, Styles and Shadows, Line Styles, Rectangles, Paths the drawing API information from the reference.

If the article helpful to you to understand basic idea about HTML5 canvas element than share your thoughts and take a look at the full canvas specification and experiment.

Enjoy RIA… 🙂

HTML5 Development, Adobe Edge Animate

March 21, 2013 Leave a comment

There are lots of discussions about Flash and HTML5 and Adobe’s focus on HTML5 and Flash Player on web. But I believe that ‘HTML is the standard and Flash Player is the mechanism which is able to push beyond that standard. There isn’t any competition with between these two technologies. I would like to consider the situation like

HTML5 take some tasks from Flash Player and make it cross-platform and across operating systems.

We should target latest new trade and learn new technologies and use best one (from Flash and HTML5) for application situation. So I would like started some fun with HTML5. From this article I would like to start with Adobe Edge Animate series.

Before staring about HTML5 development and Adobe Edge Animate related discussion I would like to list some points for ‘Why we need Adobe Edge Animate when we have a tool like Flash Professional’. There are several reasons like

1. Restrictions of Flash Players with platforms like Apple iOS.
2. HTML technology development
3. Adobe’s shifting focus from Flash Player to HTML
4. Mobile applications usage and developments
5. Learn new technology and tool ( my favorite reason )

Now let’s start with, what we can achieve using Adobe Edge Animate. The tool can be used to create same types of animations and interactions that Flash Player handle on the web in late 1990s, like some basics interaction and movements of visual objects across stage. Edge Animate includes some APIs for enabling interaction through mouse, touch and time based actions. So let’s start with ‘Introduction of Adobe Edge’.

Adobe Edge Animate is a nice tool from Adobe which provides interactive experiences through HTML5, CSS3 and JavaScript. Adobe Edge relies on three technologies; HTML5, CSS3 and JavaSrcipt. The default output or document type is HTML5, for modern browsers objects operations like transformation, rotate are rendered as CSS3, and robust JavaScript library interact with HTML5 and CSS3 contents and provides interactivity. Let’s have a brief look of these three technologies.

HTML

HTML – Hyper Text Markup Language is the core of Web. With HTML5 specification (which is in draft) with additional semantic tags and new set of API which allow great user experience through JavaScript.

CSS

Cascading Style Sheet (CSS), which define how a site or interface structured or designed. Similar as HTML5, CSS3 Specification (which is in draft), can be use for some great effects of objects in Web.

JavaScript

JavaScript language is a superset of ECMAScript. There are several JavaScript frameworks use to provide interactivity and motion. Among them jQuery is most popular one. jQuery is a best JavaScript library which simplifies Web, event handling, animation. Adobe Edge Animate Runtime use jQuery for deal with motion. You will get more information about jQuery documentation from http://docs.jquery.com/

JSON – JavaScript Object Notation is a data-interchange format used to exchange data from one system to another. Edge Animate use JSON to deal with element definitions and attributes with application. You will get more information about JSON from http://www.json.org/

The set of JavaScript libraries used in Edge Animate, which is referred as Adobe Edge Animate Runtime. If you refer HTML file created using Edge Animate, then there is a small part with the head of the document.

Enjoy RIA.. 🙂

HTML5 Banner Using Adobe Edge

February 5, 2012 2 comments

Now a days, RIA developers having high expectations from the new tool introduced by Adobe with the named ‘Adobe Edge’, for RIA interactive applications. Some people even say that the new change or trend in HTML5 can compete with great RIA tool like Adobe Flash. As I understand, Flash capabilities are more powerful and more extendable then the current versions of HTML5. At the moment, I don’t see any competition between Flash and HTML5. I think both will have their own place in the market.

Adobe Edge is new promising tool that provides an environment to create HTML5 animations through a timeline (something like flash timeline) and interface using interactive methods and functionalities. It can makes HTML5 animations very easy for designers who do not have experience with coding, and allows them to create HTML5 animation without writing a single line of code.

In this post, I would like to show you how to create a simple HTML5 banner animation using Adobe Edge. Before staring the tutorial, you can download Adobe Edge latest from Adobe Labs.

Assuming that you have some basic idea about animations with Adobe’s other tools.

Step 1

Let’s start by opening Adobe Edge. Open New File from File menu. Set document width and height properties from Properties panel on left side. Here set Width to 600 px and Height to 200 px. Also you can set title of the document from the Properties panel.

AdobeEdge

Step 2

Now from the Properties panel, open the background color picker and set the background color. And set the Overflow to Hidden to hide the objects that are off screen and also you can set Autoplay options.

AdobeEdge

Step 3

Choose Import from the File menu and open Edge icon type image and place it in the banner as shown below and set the Edge icon image Width to 180 px and Height to 160 px.

AdobeEdge

Step 4

Use Text tool, type “Adobe Edge” and set dimension and font size of the text area.

Step 5

Now you will animate the Adobe Edge icon and text through the timeline. The timeline in Adobe Edge is similar to other Adobe applications, such as After Effects. When you create an object on the stage you will find that a separate layer is created for it in the timeline. Each layer has sub layer that includes the properties of each layer. In order to create the animation, we will need to create keyframes that represent the change in layers content properties like position. As shown in below screen you can change the translate X and Y position of object.

Now the time line indicator positioned at the beginning of the timeline, move the Adobe Edge icon image to top of the stage and moves the timeline indicator by a few frames and drag the Adobe Edge icon image to its final position in the stage. Apply same thing with text object. Also you will get the animation area of object by different color.

There is an interesting panel known as Elements Panel. It simultaneously servers two purpose. It exposes the document’s DOM and acts as a Library for the items or objects used in your application. The order in which elements appears in this panel is the order in which they appear in the timeline. If you move a timeline layer up or down in the layering order, that change is instantly reflected the Elements panel and vice versa.

AdobeEdge

AdobeEdge

Step 6

Save the file and you can preview it in browser by selecting “Preview in Browser” from File menu.

AdobeEdge

In this post just show how to create a simple HTML5 animation using Adobe Edge. I think the tool is very simple, it would be helpful for creating animation, especially because in HTML5, it would be more complex to create animation using manual coding.

You will get a quick overview of the output folder from below screen. It contains the Adobe Edge included JavaScript files in “edge_includes” folder, application related JavaScript files and “images” folder contains assets used in the application.

AdobeEdge

HTML5 and future of RIA

December 31, 2011 8 comments

When Macromedia, now Adobe started using the word RIA (Rich Internet Application), might be there are few peoples in industry who visualize the future of RIA and experience desktop type experience on web applications. Adobe created development environment for such kind of applications development and also Microsoft and Sun created their own tool Silverlight and JavaFx for it.

As we know, in coming days, adoption of cloud based solutions is increased. And this momentum will be going to increase future of RIA, with few changes like tool and technologies going to be replaced by open technologies. To be specific, it’s going to be HTML5, JavaScript and CSS3. There are lots of features HTML5 has introduced which could be very effective to develop more responsive RIA solutions. There are few treads driving this change:

Web Innovation:

Browsers and core web technologies are change rapidly. HTML, JavaScript and CSS are changing to enable running applications with great user experience in browser without dependencies.

Web Performance:

JavaScript performance has improved dramatically in last few years and application performance is most important factor to provide great end user experiences.

Mobile:

Growth of smart phones and tablets is a major factor for the treads change. Support to build robust application using HTML5, JavaScript and CSS3 and also continue to have strong support ( i.e. hardware acceleration of CSS3).

So now it’s clear, that in HTML5 will be future of Web. Adobe is committed to HTML5 and focusing in two primary areas, tooling and enabling more expressive web content. I think, in future Adobe Edge will be best tool for RIA applications. Yes for enterprise application it will take some time to get place with Adobe Flash and Flex. You will get some information from the preview video given below. So with great vision, let’s focus on JavaScript and HTML5 in the New Year.

 

You will get more information about HTML5 from here.

Enjoy RIA…. 🙂