As discussed in my last post, this week we started a new topic that is HTML5, CSS3 and Javascript, that is, the future.
HTML5
HTML5 is the next version of HTML, where new features have been added to replace scripting. HTML5 is not yet official and although browsers still do not have full HTML5 support, new HTML5 features are added in their latest versions. Some of the new features are:
- A canvas tag have been added for drawing
- A video and audio tag have been included for media
- Content specific tags have been included such as header, footer, article, section and nav
- New form controls have also been added such as calendar, time, date, email and search
<video> & <audio> Tags
To embed a video, an external plug-in such as Flash are used in HTML. In order to reduce the need for these plug-ins, the video and audio tags have been added to HTML5. To embed an audio and a video the following code is added, where the format I used for audio is '.mp3' (line 5) and the format I used for video is '.mp4' (line 2).
1: <video width="320" height="240" controls="controls">
2: <source src="c.mp4" type="video/mp4" />
3: </video>
4: <audio width="320" height="50" controls="controls">
5: <source src="ab.mp3" type="audio/mp3" />
6: </audio>
 |
| Output audio and video tag |
When I tested out in Google chrome, they worked perfectly, but in Internet Explorer and Mozilla Firefox, these did not work. This might be the case that both Internet Explorer and Mozilla Firefox still do not support these tags.
Form controls
In the form tag, new input types have been added in HTML5 such as date, email, search and so on. With the use of these input types, there is more validation in the form, that is scripting for validation is also reduced. The following code shows some of these input types:
1: <input class="fstyle" name="rname" type="text" size="20" required>
2: <input class="fstyle" name="remail" type="email" size="20" required>
3: <input type="date" min="1990-08-14" max="2011-06-14" value="1990-08-14"/>
4: <input type="text" x-webkit-speech />
In lines 1 & 2, the form attribute
required is added. This is used so that if the user leaves the text field empty and the submit button is clicked, a message that the field is empty will be displayed near the text field. In line 2, the e-mail input type is used. When using this input type, if the user enters something in the field that does not contain '@' and '.com', a message that it is not a valid email address will be displayed when the user clicks on the submit button. Another thing I found out is that there is also speech recognition using the text input type and
x-webkit-speech as shown in line 4. I tried it out but it still needs improvement as I tried alot of words through the microphone but the output was not as expected.
 |
| Form Controls |
CSS3
CSS3 is the latest standard of CSS, where new features have been added, to make the styling of the web page more interesting.
Text Effects
word-wrap and
text-shadow are two new features in CSS3. In the
word-wrap text property, the text will wrap, that is if the word is too long, it also splits in the middle of a word. The
text-shadow text property specifies the horizontal shadow, the vertical shadow, the blur distance and the color of the shadow.
1: <html>
2: <head>
3: <style type="text/css">
4: h1
5: {
6: font-family: arial;
7: text-shadow: 2px 1px 1px #0000FF;
8: }
9: </style>
10: </head>
11: <body>
12: <h1>Stephanie Vella</h1>
13: </body>
14: </html>
In the above code, line 7 shows the text-shadow property, where the horizontal shadow is 2px, the vertical shadow is 1px, the blur distance is 1px and the color of the shadow is #0000FF (blue).
 |
| Text Shadow Output |
Animation
Also in CSS3 one can create animations using the
@keyframes rule. In the code below, the initial background colour will be blue (line 8). Lines 19 - 22 shows that at 25% the colour will be turned into green, at 50% the colour will be turned into yellow and at 100% the colour will be turned into red, using the
@keyframes rule. It will take 10 seconds to change from one color to the other using the
animation property (line 9). Web browsers Safari and Chrome require the prefix
-webkit.
1: <html>
2: <head>
3: <style type="text/css">
4: div
5: {
6: width:185px;
7: height:60px;
8: background: blue;
9: animation:myan 5s;
10: -webkit-animation:myan 5s;
11: }
12: h1{
13: font-family: arial;
14: font-size:20px;
15: padding:20px;
16: }
17: @keyframes myan
18: {
19: 0% {background:blue;}
20: 25% {background:green;}
21: 50% {background:yellow;}
22: 100% {background:red;}
23: }
24: @-webkit-keyframes myan
25: {
26: 0% {background:blue;}
27: 25% {background:green;}
28: 50% {background:yellow;}
29: 100% {background:red;}
30: }
31: </style>
32: </head>
33: <body>
34: <div><h1> Stephanie Vella<h1></div>
35: </body>
36: </html>
 |
| Animation |
Selectors
 |
| Selectors |
Selectors in CSS are used to select which elements should be styled. For example in the following code line 4 selects every
ol element that is preceded by a
p element, therefore lines 17-22 will have a background colour of #9263fa.
1: <html>
2: <head>
3: <style type="text/css">
4: p~ol
5: {
6: background:#9263fa;
7: width:60px;
8: }
9: </style>
10: </head>
11: <body>
12: <ol>
13: <li>Java</li>
14: <li>PHP</li>
15: <li>ASP</li>
16: </ol>
17: <p>List</p>
18: <ol>
19: <li>Java</li>
20: <li>PHP</li>
21: <li>ASP</li>
22: </ol>
23: </body>
24: </html>
For more selectors one can look at
http://www.w3schools.com/css3/css3_ref_selectors.asp
Javascript
There are also new features added in Javascript, such as web storage, web SQL storage, Offline Application cache, web workers and web sockets. I will be discussing on two new features; Web Storage and Web SQL Database Storage.
Web Storage
Web storage is an improvement of cookies, but falls under client-side scripting. The following code shows the count of how much you have visited that page. If the page will be refreshed, the counter will increase. Also if you close the browser and open again, the counter will continue. This is done using the
localStorage object, where data is stored having no time limit. When using
sessionStorage object, data will only be stored for one session.
1: <!DOCTYPE HTML>
2: <html>
3: <body>
4: <script type="text/javascript">
5: if (sessionStorage.visitcount)
6: {
7: sessionStorage.visitcount=Number(sessionStorage.visitcount) +1;
8: }
9: else
10: {
11: sessionStorage.visitcount=1;
12: }
13: document.write("Visited " + sessionStorage.visitcount + " times");
14: </script>
15: </body>
16: </html>
Web SQL Database Storage
Another feature of Javascript in HTML5 is Web SQL Database Storage, where the database can be accessible from JavaScript. The code below is used to create a new table named 'Table1Test', creating a new record, update records, delete records and to delete a table.
1: function createTable() {
2: db.transaction(function(tx) {
3: tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [],
4: function(tx) { log.innerHTML = '<p>"Table1Test" created!</p>' },
5: onError);
6: });
7: }
8: function newRecord() {
9: var num = Math.round(Math.random() * 10000); // random data
10: db.transaction(function(tx) {
11: tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value],
12: function(tx, result) {
13: log.innerHTML = '';
14: showRecords();
15: },
16: onError);
17: });
18: }
19: function updateRecord(id, textEl) {
20: db.transaction(function(tx) {
21: tx.executeSql("UPDATE Table1Test SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
22: });
23: }
24: function deleteRecord(id) {
25: db.transaction(function(tx) {
26: tx.executeSql("DELETE FROM Table1Test WHERE id=?", [id],
27: function(tx, result) { showRecords() },
28: onError);
29: });
30: }
31: function dropTable() {
32: db.transaction(function(tx) {
33: tx.executeSql("DROP TABLE Table1Test", [],
34: function(tx) { showRecords() },
35: onError);
36: });
37: }
Transactions are used to rollback, that is, if a transaction fails the updates will not be done, it will be as if the transaction never happened. The '?' are used as placeholders where it will get the data depending on the user input. For example in line 26, if we want to delete the record 'CMT3313', it will check for the id and the '?' will be replaced with '7892'. Line 3 shows the statement to create the table, line 21 shows the statement to update the table, line 26 shows the statement to delete from table and line 33 shows the statement to drop the whole table. In the
newRecord() function (lines 8-18), records with random values will be added to the tables, and the insert statement will be used as shown in line 11.
 |
| Web SQL database |
 |
| Chrome's Developer Tools |
Conclusion
As you can see, although HTML5 and CSS3 are not yet fully released, one can still see how alot of work will be reduced with these new features, and I am sure that as time goes by more interesting new features will be added. If you want to know more about HTML5, CSS3 and Javascript, you can go to this link
http://slides.html5rocks.com, which consists of a presentation that have been created using HTML5.
