INTERESTING STIJ 3043: March 2012

1. New Doctype

Still using that pesky, impossible-to-memorize XHTML doctype?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.

<!DOCTYPE html>

<!DOCTYPE html>

In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

2. The Figure Element

<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>

3. <small> Redefined

The small element now refers to “small print

4. No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags.

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

5. To Quote or Not to Quote

<p class=myClass id=someId> Start the reactor.

6. Make your Content Editable

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>

7. Email Inputs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>

8. Placeholders

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
Validation

9. Local Storage
Support matrix

10 The Semantic Header and Footer
Gone are the days of:

 
<div id="header">  
    ...  
</div>  
  
<div id="footer">  
    ...  
</div>  
<div id="header">
 ...
</div>

<div id="footer">
 ...
</div>
Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with:

 
<header>  
    ...  
</header>  
  
<footer>  
    ...  
</footer>  


11. More HTML5 Form Features 


12. Internet Explorer and HTML5
In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such. 

 
header, footer, article, section, nav, menu, hgroup {  
   display: block;  
}  
header, footer, article, section, nav, menu, hgroup {
   display: block;
}
Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix: 

 
document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu");  
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv.  This script also fixes some printing issues as well. 

 
<!--[if IE]>  
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->  
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->




13. hgroup 



<header>  
    <hgroup>  
        <h1> Recall Fan Page </h1>  
        <h2> Only for people who want the memory of a lifetime. </h2>  
    </hgroup>  
</header>  


14. Required Attribute 



<form method="post" action="">  
    <label for="someInput"> Your Name: </label>  
    <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>  
    <button type="submit">Go</button>  
</form>  


15. Autofocus Attribute  


<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>  


16. Audio Support 

<audio autoplay="autoplay" controls="controls">  
    <source src="file.ogg" />  
    <source src="file.mp3" />  
    <a href="file.mp3">Download this file.</a>  
</audio>  


17.  Video Support



<video controls preload>  
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />  
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />  
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>  
</video>  


18. Preload Videos 
The preload attribute does exactly what you’d guess. Though, with that said, you should first decide whether or not you want the browser to preload the video. Is it necessary? Perhaps, if the visitor accesses a page, which is specifically made to display a video, you should definitely preload the video, and save the visitor a bit of waiting time. Videos can be preloaded by setting preload="preload", or by simply adding preload. I prefer the latter solution; it’s a bit less redundant


19. Display Controls 
If you’re working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls attribute within the video element. 

 
<video preload controls>  


20. Regular Expressions 



<form action="" method="post">  

    <label for="username">Create a Username: </label>  
    <input type="text"  
       name="username"  
       id="username"  
       placeholder="4 <> 10"  
       pattern="[A-Za-z]{4,10}"  
       autofocus  
       required>  
    <button type="submit">Go </button>  
</form>  


21. Detect Support for Attributes 



alert( 'pattern' in document.createElement('input') ) // boolean;  



22. Mark Element 



<h3> Search Results </h3>  
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>  
23.When to Use a <div> 

if you find that you need to wrap a block of code within a wrapper element specifically for the purpose of positioning the content, a <div> makes perfect sense. However, if you’re instead wrapping a new blog post, or, perhaps, a list of links in your footer, consider using the <article> and <nav> elements, respectively. They’re more semantic. 



24. What to Immediately Begin Using

With all this talk about HTML5 not being complete until 2022, many people disregard it entirely – which is a big mistake. In fact, there are a handful of HTML5 features that we can use in all our projects right now! Simpler, cleaner code is always a good thing.



25. What is Not HTML5

SVG:  Not HTML5. It’s at least five years old. 
 CSS3: Not HTML5. It’s…CSS. 
 Geolocation: Not HTML5. 
 Client Storage:  Not HTML5. It was at one point, but was removed from the spec, due to the fact that many worried that it, as a whole, was becoming too complicated. It now has its own specification.
Web Sockets: Not HTML5. Again, was exported to its own specification. 


26. The Data Attribute



We now officially have support for custom attributes within all HTML elements. While, before, we could still get away with things like:

 
<h1 id=someId customAttribute=value> Thank you, Tony. </h1>  
<h1 id=someId customAttribute=value> Thank you, Tony. </h1>
…the validators would kick up a fuss! But now, as long as we preface our custom attribute with “data,” we can officially use this method. If you’ve ever found yourself attaching important data to something like a class attribute, probably for JavaScript usage, this will come as a big help! 

 HTML Snippet 
 
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>  
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>
 Retrieve Value of the Custom Attribute 
 
var theDiv = document.getElementById('myDiv');  
var attr = theDiv.getAttribute('data-custom-attr');  
alert(attr); // My Val  
var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Val
It can also even be used in your CSS, like for this silly and lame CSS text changing example.  

 
<!DOCTYPE html>  
  
<html lang="en">  
<head>  
   <meta charset="utf-8">  
   <title>Sort of Lame CSS Text Changing</title>  
<style>  
  
h1 { position: relative; }  
h1:hover { color: transparent; }  
  
h1:hover:after {  
    content: attr(data-hover-response);  
    color: black;  
    position: absolute;  
    left: 0;  
  
}  
</style>  
</head>  
<body>  
  
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>  
  
</body>  
</html>  


27. The Output Element 


form action="" method="get">  

    <p>  

        10 + 5 = <output name="sum"></output>  
    </p>  
    <button type="submit"> Calculate </button>  
</form>  
  
<script>  
(function() {  
    var f = document.forms[0];  
  
    if ( typeof f['sum'] !== 'undefined' ) {  
        f.addEventListener('submit', function(e) {  
            f['sum'].value = 15;  
            e.preventDefault();  
        }, false);  
    }  
    else { alert('Your browser is not ready yet.'); }  
})();  
</script>  


28. Create Sliders with the Range Input


    Step 1: Mark-up 
            
<form method="post">  
    <h1> Total Recall Awesomness Gauge </h1>  
    <input type="range" name="range" min="0" max="10" step="1" value="">  
    <output name="result">  </output>  
</form>  


    Step 2: CSS 
            
          
body {  
    font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;  
    text-align: center;  
}  
input { font-size: 14px; font-weight: bold;  }  
  
input[type=range]:before { content: attr(min); padding-right: 5px; }  
input[type=range]:after { content: attr(max); padding-left: 5px;}  
  
output {  
    display: block;  
    font-size: 5.5em;  
    font-weight: bold;  
}  


       Step 3: The JavaScript



           
(function() {  
    var f = document.forms[0],  
        range = f['range'],  
        result = f['result'],  
        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;   
  
    // Determine if browser is one of the cool kids that  
    // recognizes the range input.  
    var o = document.createElement('input');  
    o.type = 'range';  
    if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');  
  
    // Set initial values of the input and ouput elements to  
    // either what's stored locally, or the number 5.  
    range.value = cachedRangeValue;  
    result.value = cachedRangeValue;  
  
    // When the user makes a selection, update local storage.  
    range.addEventListener("mouseup", function() {  
        alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");  
        localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");  
    }, false);  
  
    // Display chosen value when sliding.  
    range.addEventListener("change", function() {  
        result.value = range.value;  
    }, false);  
  
})();

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

1. New HTML elements that improve our ability to describe content

HTML's primary task is to describe the structure of a web page. For example, by enclosing text between <p></p> elements, HTML tells the browser that the text between those elements is a paragraph.

2. Improved web forms handling

The most exciting thing about Web Forms 2.0 is form validation. Currently, developers are required to use JavaScript (client-side) or PHP (server-side) code to validate inputs. For example, many web forms contain required fields (perhaps for the username and email fields):

3. APIs for easier web application development

HTML 5 will introduce several application programming interfaces (APIs) to new and existing elements, aimed at improving web application development and addressing current issues with HTML 4's lack of ability to allow developers to mark up web applications.
One API is specifically for working with audio and video and will be used with the <audio> and <video> elements. It will provide audio and video playback capabilities and eliminate the need to use third-party applications, such as Flash, to develop and display media (at least for supported media files).

4. The <canvas> element allows image scripting on the fly

Most people take in information more quickly and effectively through visuals. For example, between a table, numerical data, and a pie chart, the pie chart gives users a better feel for the scale and relationship of data (at least most of the time).

The downside of images is that they're static. If you create a pie chart using a traditional method (for example, with an image editor like Photoshop, or a graphing application like Excel), you wouldn't be able to adjust any data that changes without manually editing your graphics.
With the <canvas> element, you can take constantly changing (database-driven) data and apply it to a pie chart like the one above, as well as other types of 2D visuals (even a cat, if you're so inclined), via scripting.
The canvas API also allows users to interact with <canvas> elements. For example, you can write a script that responds to users' clicking on a particular section of the pie chart.

5. Users can edit and interact with sections of a web page

The section in the proposed HTML 5 specifications about User Interaction describes new ways of marking up interactive web pages. The contenteditable attribute (a boolean attribute to which you assign either true or false) allows you to indicate which parts of a web page users can change.
This can be useful for wiki-style websites, in which content is user-generated. Another use of the contenteditable attribute would be to create web page templates. You can allow certain regions of a web page to be open to content editing and lock other regions that shouldn't be changed. This gives users of your website who aren't proficient in HTML an opportunity to input content safely without affecting critical areas that should be handled by more knowledgeable users.
At the document level, you can make an entire page editable via the designMode attribute, which accepts two values: on or off.

INTERESTING STIJ 3043

Tuesday, 27 March 2012

28 HTML5 FEATURES

HTML Snippet

Retrieve Value of the Custom Attribute

Friday, 23 March 2012

5 EXCITING THINGS TO LOOK FORWARD TO IN HTML 5

1. New HTML elements that improve our ability to describe content

Saturday, 17 March 2012

MY NEW WEBPAGE

Sunday, 4 March 2012

ABOUT TODAY'S CLASS

Total Pageviews

MY CALENDER

TIME