HTML5 and CSS3

Introduction

Even if more and more websites are starting to implement features of HTML5 since most modern browsers have some HTML5 support, this new standard for HTML, XHTML, and the HTML DOM is still a work in progress. 

Apart from the obvious of having new features based on HTML, CSS and JavaScript, the main aim of HTML5 is to reduce the need for external plugins (such as Flash) and scripting, have better error handling and perhaps most importantly (at least in my view) is to be independent from any device.

New Features in HTML5

Since the web has changed so much since the previous version of HTML released in 1999 HTML 5 introduces a lot of new features, to make better use of web capabilities. Some of the most noted features include:

• Video and Audio Elements for media playback
• More and better support for local offline storage which is based on databases instead of cookies
• A canvas element for drawing used for rendering of graphics or other visual images
• New form controls to be used for error handling
• Content specific elements (such as: article, footer, header, nav and section) to give pages more meaning
• New form controls ( such as : calendar, date, time, email, url, search) to be used instead of standard textboxes when a specific format of input must be done.

Browser compatibility 

Unfortunately browsers still don’t have a standard which all follow, each and every one of them have different compatibility with HTML5. A good way to find out how much your browser supports HTML5 is to go the website called html5test.com with any browser. This will give your browser a score out of 450 and then give you a detailed explanation where your browser gained an lost points on HTML 5 standard and specifications.

I first tested this website using the latest version of Google Chrome (12.0.742.112), this scored a respectable 328 (plus 13 bonus points) out of a possible 450, being highly compatible in the areas of Parsing rules, the Canvas element, Video (with the exception of subtitles and MPEG-4 support), Audio, Elements, User interaction, Geolocation, WebGL, Communication, and Storage, while having completely no support of microdata, local multimedia and notifications. Google Chrome fared reasonably in the Forms, Security and Files sections.

As a comperision Internet Explorer 9 only scores a 141 (with 5 bonus points) out of 450. Even the default browser of an Android smart phone scored a slightly better 184.

CSS 3

CSS 3 is the latest standard for CSS, which was developed to go with HTML 5 and has a lot of new features to be used to style Web pages.

The first feature that I have come across is the additional functionalities of borders. With CSS3, you can create rounded borders, add shadows to boxes and use images as borders. Unfortunately not all browser support all these features, and most that do require a prefix in order for everything to work.

Here is an example of a rounded border:

*here the –webkit- prefix is used for Google Chrome and Safari

Another interesting feature is the text shadow effect which is very simple to use, the only parameters to give are the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow.

text-shadow: 5px 5px 5px #FF0000;

 

CSS 3 has also added the capability to use fonts which are not installed on the user’s machine, but use a source with a URL.

A complete new feature is the 2D Transformations with which one can move, scale, turn ,spin and stretch elements.

-webkit-transform: rotate(30deg);

-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);

-webkit-transform: skew(30deg,20deg);

-webkit-transform: scale(2,4);

 

There are also the 3D transformations but these only work on Google Chrome and Safari using the –webkit- prefix

Another function is the Transition function which is used to add an effect when changing from one style to another without using Flash or JavaScripts.

This example would make a div element stretch whenever the user moved the mouse on it.

  

 

Finally there are also animations which can replace animated images, Flash animations, and JavaScripts in many web pages.

An example is to have the background color of an element change gradually, or the position change. This is done by writing what needs to happen at certain points of the animation, and how long would the animation take to fully complete.

For example an element starts off with a blue background color and you want it to animate to green midway through the animation and finally end up yellow. And you want the animation to last 10 seconds.

So in this case the CSS would be:

Conclusion

I found out that HTML 5 has amazing potential with all its features, unortunatly not all browsers are really compatible with it ubt progress is being made. I also think with all the features of HTML5 and CCS3, Flash and Javascript may die in the future.

Second Life (cont.) Building Objects and Scripting

Introduction

In this blog post we go into more detail in Second life and start building some objects in this virtual world. To start building in Second Life first you must go in a place in the world that allows the user to build. These places are called Sandboxes, it is only allowed to build in these Sandboxes and each Sandbox has its own rules such as you cannot build a wall around an avatar caging him being not able to get out without a teleport. Failure to abide these rules could result to a ban from Second life.

Building Objects

To Start building in the sandbox you right click the ground and select build from the menu shown this will make the building menu visible on the screen. Building is done by selecting shapes (prims) and placing them in the world. These shaped can be modified in shape, position and size as the user wants. Also multiple items can be linked together to form one object. This is done so that an Object will have more details to it and will look better.

The first object I created was a couple of boxes linked together to make a very bad looking chair that an avatar can sit on.  Every avatar can sit on your object if you are not currently editing it. I made sure that when an avatar will sit on my object, it will sit properly.

Also you can create objects and wear them on your avatar carrying them around where you go showing, while showing them to other people. For this I decided to create a simple War hammer for my Avatar to carry around. I used the cylinder type prim and a cuboid type prim and linking them together after positioning them carefully at the right place.


To wear the object, just right click it and select wear from the menu. I decided to put the object I created on the right hand of my avatar. When I selected this the hammer didn't slot in my avatar's right hand correctly so I adjusted its position as well as I could to make it look like my avatar is carrying the hammer in its hand while walking.

Scripting

Users in 2^nd life use Linden Scripting language to script objects and have them interact with the rest of the virtual world. To script an object, right click it and choose edit to open the edit window. In the edit window you may select "more>>>" to reveal five tabs marked general, object, features, content, and texture. Then choose "content".  This window shows the contents of an object which can hold scripts, notecards, and even other objects. Press "new script" to add a new script. 

When scripting an item you have to tell the object what to do and when will it do it. Simple examples of what an object can do with script include:

• Rez an object
• Give something to an avatar
• Say something in chat
• Change the object's color
• Change the object's texture
• Prompt an avatar to load a URL in a web browser
• Create hovering text
• Play a sound
• Move around

Amongst other situations these scripts could be performed in the following situations:

• As soon as the script starts
• When an avatar touches your object
• On a repeating timer
• When an avatar is nearby
• When someone says something

             

Here is an example of a script of an object changing its color to red whenever somebody touches the object the script:

default
{


touch_start(integer total_number) {


// change color!
llSetColor(<1.0,0,0>,ALL_SIDES);


}


}

This following example will have the object say "Hello"  in the chat on every 30 seconds.

default
{


state_entry() {
llSetTimerEvent(30);
}
timer() {


// speak out loud!
llSay(0,"Hello");


}


}

After experimenting with these simple examples on the Hammer I created,  I decided to create some more simple objects.

First I started with a very simple chair that would be used to sit on. I just used a cube to sit on and a thin cuboid to make the back of the chair, I combined both objects and made the avatar sit on it.

Finally as my last 2 scripts I decided to give a new script to my hammer to send emails and make it open an internet browser at a specific webpage. 

The script used for the emails is as follows:

default  
{  
  touch_start(integer total_number) 
  {   
    llEmail( "danielsammut92@gmail.com", "Test", "Test" );  
  }  


} 




And The script used to open a web browser to a webpage I desired is :




default  
{  
      touch_start(integer total_number) 
      {  
             llLoadURL(llDetectedKey(0), "view my blog",   "http://sammutdaniel.blogspot.com/");  
       }  
}

Both scripts are run whenever the object is touched.