Introduction
Hi all, this I will not talk about second Life, but I will focus on newer web technologies. This Week's topic is about HTML 5 and CSS 3 and I will talk about, compatibilities and I will also do some sample code. HTML 5 is not a completed language and not all browsers support its features. Some browsers show better capabilities than others in this task.
Browser Wars
The wars between browsers is always on and as time passes browsers improve their HTML 5 compatibilities to offer better support than others. Currently all major browsers offer quite good HTML 5 support with IE9 having the least ratings from the other browsers. The website http://www.findmebyip.com/litmus/ shows a list of browsers together with their compatibilities. As it can be seen Google's Chrome and Apple's Safari seem to do a pretty good job. In fact both Google and Apple give a lot of importance to this technology in their development. Chrome's quick and seamless updates continue to improve the product and to add more and more HTML 5 support.
The website http://html5test.com/ provides a list of your browsers supported and unsupported features together with an overall rating. Well we all did this test in Web Technologies class and the first thing I noticed is the huge difference in rating between chrome and IE 9. Chrome (12.0.742.100) currently scores 328/450 while IE9 only scores 141/450. I also notice that my browser had problems using WebGL technology, something which my friend's Chrome browsers did not.
I was a bit disappointed at first and did not know what cause the problem. The new browsers promise that a simple install of the browsers will include all features, but this was not exactly true in my case. I immediately though it was a problem with my graphic's card driver, and I was right. I have an ATI HD Raedon Graphic Card, which is not Recent, but not very old neither. I found several articles about ATI chips not supporting WebGL, and from the ATI Website I downloaded a new driver that supports this technology. It seams that ATI issued newer drivers to all chips considered as non legacy. These new drivers add support to WebGL. I tried WebGL on several other PC's with the chrome browsers. All new graphic cards seem to do pretty well but graphic cards considered as Legacy are not supported. Finally I was able to view some WebGL Demos online.
Differences between HTML4/CSS2 and HTML5/CSS3
HTML5 Introduces a lot of new features but some old tags will be no longer supported and newer tags must be used. HTML5 adds support for the Header and Footer tags that can display information in the web document. Other new tags provide better structure to the document. Other interesting elements are the media elements and the canvas element. These tags are new in HTML 5 and offer better media support that in the past was only available through web extensions such as adobe's flash player.
Media elements illustrated on the website www.w3schools.com include:
| Tag | Description |
|---|---|
| <audio> | For multimedia content, sounds, music or other audio streams |
| <video> | For video content, such as a movie clip or other video streams |
| <source> | For media resources for media elements, defined inside video or audio elements |
| <embed> | For embedded content, such as a plug-in |
These elements allow you to play media directly from the browser. The supported browser codecs may vary although HTML5 provides for a set of standard codecs that should be supported. An even more interesting new element is the canvas element. This element allows programmers to draw things using Scripts. I used to do a similar thing using the Canvas in Java Applets, but working totally in the web browser is another thing. Speaking about Applets, the Applet tag will no longer be supported but applets can still be used by using the object tag and adding the right mime_type in the attribute type.
CSS3 is completely backwards compatible and therefore no old code must be changed. CSS3 provides new styling such as:
- Selectors
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
New features about borders are introduced. The feature border-radius produces round corners. It has been around for a while in some browsers although IE only stared supporting it on version 9. To make this feature in CSS2 you would have to use several images to obtain the rounded features and than place them on the corners. Well most border features seem to be supported by all major browsers although some features may be still in a testing phase.
Another interesting feature in CSS3 is the text shadow. Although still not supported in IE9, this feature will make part of the new CSS standards. Without this feature shadow could only be used by suer imposing two text lines.
The most interesting parts of CSS3 are surely the 2D and 3D transformations that allow you to manipulate objects but changing their 2D and 3D positions on the screen. This includes rotating, skewing and scaling objects. Most of the features are still a work in progress but on the W3schools.com you can find several examples of using the already supported tags.
Together with CSS3 and HTML5 new JavaSript features are also added. these new features include:
- Web Storage
- Web SQL Storage
- Offline application cache
- Web Workers
- Web Sockets
Some Hands On
The task for todays week is to use two new fetures of:- HTML5
- CSS3
- new JS
Well in this exercise I wanted to try so many things, but I had little time, so I decided to make some code to try various features, without actually caring about the website looks and uses. My idea was to try the new features that I would had used earlier in this course if they where supported. All my code works in Chrome but was not tested in other browsers. since some tools use the webkit, they will probably work only on chrome and safari.
To start with I decided to use the canvas elements, so I made various canvas elements in my HTML Body.
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
The first thing I wanted to try out is the border radius that produces round corners. In the first weeks exercise, I remember that I could not do it in IE 8 and I had to use several pictures to do it. Now it can be done in a single line of CSS.
border-radius:25px;
Then I decide why not add some shadow to the canvas so I used the box-shadow property
box-shadow:10px 10px 5px #888888; where
box-shadow:h-shadow v-shadow colour
h and v shadow are the positions of the shadow and can be eithier positive or negative.
Finally I added a border to the canvas and added the colour orange. Then I said, why not use some new CSS transformations. The code below shows my entire CSS.
<style type="text/css"> canvas { width:100px; height:75px; border-radius:25px; box-shadow:10px 10px 5px #888888; background-color:orange; border:1px solid black; } canvas:nth-child(odd) { -webkit-transform:rotate(0deg); -webkit-animation-name: myfirst; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: infinite; } canvas:nth-child(even) { -webkit-transform:rotate(30deg); -webkit-animation-name: mysecond; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes myfirst { 0% {-webkit-transform:rotate(0deg);} 20% {-webkit-transform:rotate(10deg);} 40% {-webkit-transform:rotate(20deg);} 60% {-webkit-transform:rotate(30deg);} 80% {-webkit-transform:rotate(20deg);} 100% {-webkit-transform:rotate(10deg);} } @-webkit-keyframes mysecond { 0% {-webkit-transform:rotate(30deg);} 20% {-webkit-transform:rotate(20deg);} 40% {-webkit-transform:rotate(10deg);} 60% {-webkit-transform:rotate(0deg);} 80% {-webkit-transform:rotate(10deg);} 100% {-webkit-transform:rotate(20deg);} }
I decide to use the new selectors features of CSS to choose the odd canvases and the event canvases separately. I created key frames with the rotation transformation at different angles in different percentages of the key frame. When selected, the canvas objects are assigned the appropriate keyframe, the duration of the animation, the timing function and the iteration count. In this example the objects keyframe duration is set to two seconds and iterations are infinite. This way the animation never stops.
Now that we have the canvas all set up, why not draw on it. I decided to draw on all even canvas objects. Drawing in Java Script is not easy and requires some thought. The code below shows some javascript.
var obj= document.querySelectorAll("canvas:nth-child(even)"); for (var i = obj.length >>> 0; i--;) { var ctx=obj[i].getContext('2d'); for (var x = 0.5; x < 500; x += 20) { ctx.moveTo(x, 0); ctx.lineTo(x, 375); } for (var y = 0.5; y < 500; y += 20) { ctx.moveTo(0,y); ctx.lineTo(375, y); } ctx.strokeStyle = "red"; ctx.stroke(); }
The function document.querySelectorAll() retrieves a list of objects and puts them into the obj variable. In this case the objects are all canvas elements. Only the even canvas elements are selected. A for loop is used to iterate through each object. for each element, a ctx variable is used to store the 2D context of the canvas. Here you can draw and it will become cisible on the canvas.There are various objects that can be drawn but I decided to draw a grid. To draw a grid you must first learn how to draw a line. This is easy, and only two functions are needed. the function moveTo() is used to select the initial drawing position. This function needs the x and y coordinates. The second function LineTo also takes the x and y coordinates and draws a line from the initial starting position to the given coordinates. Using these functions, the lines are drawn and kept in memory, but are not final and therefore not visible. The strokeStyle property sets the stroke colour and the stroke() function draws the line. To create the grid I used two for loops, one to draw vertical lines and another to draw horizontal ones.
Finally I wanted to try the output tag and the local storage features offered by javascript.
The following code shows how I used them.
<script type="text/javascript"> window.localStorage['value'] =document.querySelectorAll("canvas").length; </script> <p>There are currently <output id="result"></output> Canvas objects on the screen</p> <script type="text/javascript"> document.getElementById('result').textContent = window.localStorage['value'] ; </script>
The context in which the code was used does not really make any sense, I just wanted to try out the features. In n initial script, I store the value of the number of canvas elements on screen in a local storage called 'value'. Then I display a paragraph of text with an empty output tag inside. Later on in the code I run another script that gets the number stored in the local storage and injects it in the output tag, which is then displayed in the paragraph.
The image below shows a screenshot of the final output of the code.
Below is a link to my website where I uploaded this page.
Conclusion
I found using HTML5 features much easier than expected, although I did not perform any particularly difficult tasks. HTML5 really adds something to the web and is much more powerful than its predecessor. With the new styling and scripting, anything can be done pretty much with HTML 5 eliminating the need of other external tools. I see this as a good thing especially for the users that will only need to download a browser and nothing more. Lets hope HTML 5 is finished earlier than expected so we can start benefit from it's features.
No comments:
Post a Comment