From this week onwards lessons will be held on any technology of our choice as long as it is useful to us students and that we can gain from. Since technology is evolving and changing by the days it is very important to keep up with them, if you want to always keep up with new technology.
Introduction of HTML5The word HTML as we have seen in previous blogs stands for Hyper Text Markup Language, which is a programming language used for developing websites. HTML4, the one we are most familiar with was standardized in 1997. Since technology is improving everyday now we have HTML5 which is a new generation, a more enhanced, a fifth generation of the original language which was introduced in 1990. HTML has been going on for a long time however HTML4 was now lacking on certain things as it struggled when it came to keep up with certain add-ons like Microsoft Silverlight and Adobe Flash therefore it needed room for improvement and that's where HTML5 came in handy. HTML5 started out the when Hypertext Application Technology Working Group and the W3C decided to move forward together to boost up technology as in fact happened. Browsers have to be update to adopt these new enhancements.For users to get these improvments one has to be updated with new releases to adopt these new standards although by updating browsers is not enough as users using old versions of browsers have to be willing to upgrade newer versions of browsers.
Interesting sites
Two very interesting and useful sites are the following: http://html5test.com/ - From this site one can check how well HTML5 is supported on the browser you are using. For example Google Chrome scored 291 points and you can see which specifications scored least and most. Internet Explorer on the other hand scored only 32 points out of 400 which is really bad. Another useful site is http://www.findmebyip.com/litmus/ this is a browser compatibility guide.
New Elements
As improvement HTML5 introduced several new elements which will help and will make life easier for developers when coding. These are some of the new elements which are added more elements can be found on http://www.w3schools.com/html5/html5_new_elements.asp
For starters the new doctype for HTML5 is <!DOCTYPE html> you will need this if you want to make use of HTML5, with this snippet of code one will be able to make use of XHTML or HTML in strict mode. Going down to the head section, this has been simplified for instance the <meta> tag has been improved. Following is the body section this is where most changes have been made. The best thing is that one won't need to nest several div tags to create a good website layout. HTML5 came along with better elements like the <header> and the <nav> element. On the left is an image which will be an output of how HTML use to be used while below is an image of what one would get as a result when using HTML5. Personally I think that the HTML5 makes work more organised and easier to understand. As when I use to code using HTML4 it use to be time consuming till I got the hang of which tag is which. At least know you have the <nav> which can be used for menus the header for banners and titles and the <footer> for footer and copyrights. 
Drawing with HTML5
One can create different things with the draw feature like animations, charts and graphs, simple diagrams and more.To draw with HTML5 you need to use a canvas. One can use rectangles and arcs as well as paths and line drawing and quadratic curves also you can give shapes certain effects like; fillings and strokes, applying shadows, gradients and transparency. You can also rotate the image and scale it. To do these things you need what's called a canvas and to use a canvas you need two specific things, the most important is the <canvas> tag, in which you will be placing drawings within them and also javascript to do the drawing. Below is an example of how one can create a smiley face.
1.<script type="text/javascript" 2. window.onload = function() { 3. var drawingCanvas = 4.document.getElementById('myDrawing'); 5. if(drawingCanvas && drawingCanvas.getContext){ 6. var context = drawingCanvas.getContext('2d'); 7. context.strokeStyle = "#FFFFFF"; 8. context.fillStyle = "#800040"; 9. context.arc(100,100,50,0,Math.PI*2,true); 10. context.closePath(); 11. context.stroke(); 12. context.fill(); | |||
|
CSS3
The major difference with CSS3 from CSS2 is the CSS3 introduced modules, modules allow specifications to be completed and approved faster as they are completed in chunks. Selectors are a new functionality in CSS3. Examples of new selectors:
- Matching on attributes and attribute values, including partial matches
- Structrual pseudo-classes like nth class
- A target pseudo-class to style only elements that are targeted in the URL
Another improvement can be seen in text effects and layouts where one can make changes to justification of text in documents and whitespace. Also CSS can handle more media like running headers and footers which will also include advanced properties for printing generated content like footnote and cross-reference properties. Designers can also make multiple use of columns by using column-gap, column-count and column-width.
CSS Borders
Borders included a new feature being the border-radius property, this allows to make use of round corners easily without needed corner images or multiple div tags. To make a rounded corner there are two ways either. First one is using four individual properties border-bottom-left-radius, border-top left-radius, border-bottom-right-radius and border-top-left-radius, this will accept either one value or else two values. When two values are used the first value defines horizontally and the second vertically . Else you can use one command, border-radius. This is a screen shot of some of the corners that I tried doing.#newStyle{
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background:#82C0FF;
margin-bottom: 10px;
}
#newStyle2{
height: 7em;
width: 15em;
-moz-border-radius: 2em 5em 2em 5em;
border-radius: 2em 5em 2em 5em;
background:#82C0FF;
margin-bottom: 10px;
}
#newStyle3{
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color:#990033;
margin-bottom: 10px;
}
Resizing a box
Another new feature is the box resize. This will allow users to re-size a box. To be able to do it you need to user the resize and overflow properties.
div id="size"
{
border:5px solid;
border-color:#990033;
padding:10px 40px;
width:100px;
resize:both;
overflow:auto;
}
Both these image are the same box simply it was just resized. On one of the corners there is an icon you simply click and drag and the box will be resized.
Other new things in CSS3 are text effects, like shadowing and keyframes. Keyframes are animations example having a box which changes colours. Shadowing is done using the text-shadow: 3px 1px 1px #990033; This will cause a text-shadowing effect which will have a pinkish colour. Another new feature is the word-wrap this allows long words to be broken and wrap onto the next line. This takes two values; normal or break-word
Keyframes in my opinion are very interesting. For this I created two boxes with CSS and then one box which will be moving. As HTML I used 2 divs. <div class="box1"> <p>This is box 1</p></div><div class="box2"><p>This is box 2</p></div>. Then created the CSS
1. .box1{
2. width:100px;
3. height:100px;
4. background-color:#004080;
5. position:absolute;
6. top:100px;
7. left:50%;
8. margin-left:-100px;
9. }
10.
11 .box2{
12. width:100px;
13. height:100px;
14. background-color:#800040;
15. position:absolute;
16. top:100px;
17. left:90%;
18. margin-left:-100px;
19. }
20. @-webkit-keyframes BoxMotion{
21. 0%{left:90%;}
22. 50%{left:10%;}
23. 100%{left:90%;}
24. }
25. .box2{
26. -webkit-animation:BoxMotion 10s infinite;
27. }From line 1-9 the first box is being created giving it the dimensions, selecting a colour and specifying the position. From line 11-19 is the other box being created having the same features and properties as the previous box. Line 20-24 is setting up the keyframes. BoxMotion is the name of the animation. From lines 25-27 is where the fun part is. This is making one box move. 10s is the speed you want to apply to the moving box, if for instance you set it to 5s it will go faster. Infinite is there so that the animation will keep going on and won't stop.
References:
Keyframes in my opinion are very interesting. For this I created two boxes with CSS and then one box which will be moving. As HTML I used 2 divs. <div class="box1"> <p>This is box 1</p></div><div class="box2"><p>This is box 2</p></div>. Then created the CSS
1. .box1{
2. width:100px;
3. height:100px;
4. background-color:#004080;
5. position:absolute;
6. top:100px;
7. left:50%;
8. margin-left:-100px;
9. }
10.
11 .box2{
12. width:100px;
13. height:100px;
14. background-color:#800040;
15. position:absolute;
16. top:100px;
17. left:90%;
18. margin-left:-100px;
19. }
20. @-webkit-keyframes BoxMotion{
21. 0%{left:90%;}
22. 50%{left:10%;}
23. 100%{left:90%;}
24. }
25. .box2{
26. -webkit-animation:BoxMotion 10s infinite;
27. }
 |
| Two boxes pink box is moving to the right |
 |
| Two boxes moving pink box went on purple box |
JavaScript
Like HTML5 and CSS3, Javascript also added some new features some of them are Web storage, Web SQL storage, offline application cache, web workers and web sockets.
Web SQL storage
This is also known as DOM storage and offers improvement in cookies. This offers great storage capacity of 5MB. Data stored in a data stored does not expire and can span across several windows. There are two types of data storages session sessionStorage and local storage localStorage. Both are used for different purposes sessionStorage is used when you want data to be stored only for one particular session while localStorage is used to store data for more than one single session, when the browser is closed and is re-opened the sessions will remain there. Both of these implement the storage interface.
Methods and properties:
- length - Gets the number of key/value pairs in the list
- key (index) - Returns the key at the given index
- getItem(key)- Returns the key associated with the given key
- remomeItem(key) - Removes the item
- clear()- removes all keys
Web SQL storage
This is used for accessing databases directly from javascript. One can now create a table, create a new record update and delete the record and also deleting tables. Below are some examples of how can this be done. Client-side database storage can be used.
Conclusion
With all these improvements and new features one can immediately notice a sign of relief as things have been simplified in the terms that now developers are more flexible with what can be done and achieved. Even thoughHTML5 is not fully released yet one can already notice the difference and once it is released there will be a big difference. CSS really made things easier. I remember doing the keyframes using flash and then loading up the flash animation into the website. With keyframes the size of the file will also help in having smaller sized website. References:
No comments:
Post a Comment