HTML5, CSS3 & JavaScript

Overview

HTML 5 is being touted as the future of web-development for some time now. The rise of HTML 5 has caused many battles with other web technologies. Most notable rival is Adobe and their Flash platform. Flash has been used in many web projects since it brings dynamic and aesthetically pleasing content to your web-page. This however came at a price of sluggish performance a notable lack of scalability. HTML 5 and it's related technologies are now bringing the same level of dynamic content by extending the already standard HTML. Browsers are still implementing HTML 5 and CSS 3 functions as we speak. The use of engines is being used by browsers as well to enable graphics to be rendered specifically through our GPU (Google Chrome and Safari's Webkit and Mozilla Firefox's Mozilla engine).

As we are seeing more and more of our mobile devices be HTML 5, CSS 3 capable (Mobile Safari on iOS and Chrome on Android) more companies are embracing the new technologies with some even jumping ship from Adobe Flash altogether. The outspoken Apple blatantly showed this is 2010 by issuing a demo reel of HTML 5 and leapt into a heated and humorous debate with Adobe for a few months. More sites are now popping up with developers gearing and getting more and more creative as the tools develop.

---

Giving It A Try

I took quite a tour of the new available features such as the great new functions of HTML 5 such as the web-storage. Saw some clever web-pages utilizing CSS 3 in a myriad of combinations to produce stunning yet surprising simple and clean results, both in the terms of the coding and in the terms of the user interface. Switching to advanced JavaScript, the demos found at Google Experiments are particularly good (check webpage: ro.me!) and some even quite useful.

Guided by these innovative solutions, I check some tutorials at w3Schools and implemented some of features, starting off with HTML 5 web-storage function. There are two ways of storing data on the client, either on the Local Storage or as a Session Storage. Using the sessionStorage function we can now create a simple output to show how many visits the user has made to the page in the current session. The code is shown below:

A new attribute was given to the "input" tag; the email attribute. This checks matches the entered text with the basic email format of "x@x.x" and outputs an error message if it is not correct, as shown in the image below:

Another well-requested feature, especially by web-designers is the ability to round your borders (this could previously be done by some well-placed images posing as your "border"). Now, in CSS3, by simply specifying your border-radius, you will get a rounded bordered box, shown in the code below:

Animations will catch anyone's eye and as we can now start to deviate from Flash through the use of CSS3 2D & 3D Transformations and Animations. I experimented with a few of them and got to grips with rotation, translation, scaling and skewing transformations as well as defining keyFrames for the stages of an animation. The code is shown below:

I grouped my experimentation together into a single page that uses HTML5, CSS3 and JavaScript that will:

• display the visit counter for this session and animate it to move left and right and back
• show a form with rounded borders that will include an email and a password field
• display a box with text, on which when the mouse is hovered, the box is spinned 360 degrees and changed in size, while having the text being resized accordingly

---

Concluding With The Same Old Cross-Browser Issues

Not all browsers support everything right now, and as I discovered while coding, you need to specifically call their respective toolkits for some of the code to work. The images below show the webpage in different browsers to highlight the differences between them.

Second Life: More Scripting

For this week, we're taking a thorougher look at scripting in Second life using Linden Scripting Language (LSL). First and foremost re-run through some basic rules and outlines of LSL:

• it is a strongly typed language (every variable needs to be declared and they can only hold values of the relevant type)
• variables: integer, float string, key, vector, rotation and list and some of their practical uses
• basic loops and conditions (for, do, while) which are similar to Java and PHP
• a look at some string functions

Through the basic understanding, we now applied some of the example scripts in-game and modified them to our preferences. These included a colour changing object, objects that open webpages and objects that change the light they emit when selected.

While scripting these objects we became more familiar with some LSL functions, such as, the different chat levels that are available in game (channels, owner chat, private messaging etc.), dialogue options, object listening and making use of vectors and lists.

Following up on this, I decided to implement an object that will give a passer-by the option to type a message which will be sent to the owner via email. First and foremost I create the object out of basic shapes and gave it some texture. The picture below illustrates the mailbox object.

For the object scripting I made use of and combines some of the examples to produce the desired result. The script will check for the online status of the owner and always display that status as part of that object. When a user selects the mailbox, they are prompted with the option to enter a line of text in the chatbox. That line is then sent via email to the owner. The pictures below depict a user sending a message through the mailbox system.

Conclusion

This brings to an end the Second Life portion of this module. Second Life was quite an interesting subject to tackle. It is a niche in itself, a game that give you abilities and tools to create and manipulate objects at will. This "game" however seems to lack any purpose, there does not seem to be any quests or end-game objective or any form of completion. Thus, it is a platform on it's own. In today's world we are seeking integration in everything. You Log In with your Facebook or Twitter account to leave comments on blogs or forums, eliminating the Signing Up process and combining your digital life into a few accounts. As we discussed in class and as it was pointed out by several class-mates, if somehow, this platform could be integrated with social networking, then it could increase the appeal of the game.

Creating a complex object

Starting off I decided to create a room with a modern and free design. Following some tips and guides I commenced the object by creating a base for my building. It goes without saying that this object will be made up of more than one basic prim, so I had to first understand how to work with and link multiple prims.

Connecting prims requires that you first create more than one prim and then select them using the Shift key and change their properties to "Linked". Through this method, I built up the base and the walls. Through trial and error I came to realize that to align and place the objects together, one should make use of the positioning properties of the respective objects. This results in perfect alignment and not aligning them by eye and when you rotate the view, the object is totally not as it should be.

After I create the walls and the floors I wanted a roof to be made up in a cloud-like manner. This requires you to manipulate your object to deviate from the basic shapes. I created a basic object and manipulated and edited the options to create around 8 unique cloud-like random shapes and placed them around each other to form a cloud-like roof.

When I finished the basic structure I changed the textures of the objects to reflect wood, for the walls, some nice tiles for the floor and glass-like cealing. I also changed the texture of the entrance to reflect a grassy texture and added some benches and an orb-like transparent centrepiece.

I found building objects quite enjoyable though like most things, practise makes perfect so in order to learn how to translate what you have in mind onto a 3d model requires a fair amount of time.

Below is gallery showing the progress of constructing such an object

Second Life - Creating Objects & Scripting

For this week's lecture, we first logged in appropriately on Second Life and added each other in-game. Following this, we were all instructed to meet up in a sandbox called "Fermi". A sandbox is a piece of in-game land were one is allowed to built their objects and can put them in their inventory for later use.

Meeting there, we all started to get to grips with building basic objects and the general controls as regards it's shape/size/rotation etc. I managed to create a wearable glowing halo by creating a torus shaped object, re-sizing it, rotation it, adding the glowing and transparency effects and finally wielding it.

Next, we started dabbling with scripting objects. This is done through the game's own scripting language called the Linden Scripting Language (LSL). LSL is runs on the server side and is loosely based on Java and C. It is made up of "states","events" and functions, and crucially, every script must have at least one state: the default state, and one event handler. "Events" and pre-defined and the user can define the respective handlers for these events when associated to a particular object.

In-game we created objects that say text when clicked or change their colours when switching states.

All-in-all again, the concept is quite neat but the delivery is hindered by massive issues of lag and glitches. Sometimes it took a fair minute for a particular script to run and up till now we are still dealing with fairly basic scripts.