W3C recommendation! Unobtrusive JavaScript is the practice of separating out any JavaScript behavior code from your content structure and presentation. According to Adobe, with Unobtrusive JavaScript, only <script> tags that include external JavaScript files are allowed within your document. The goal is to eliminate the use of any <script> tags with inline JavaScript and the use of any HTML behavioral/event attributes, like onclick, onmouseover, etc, that make use of JavaScript from within the content markup itself, and externalize this code in a separate JavaScript file which gets included by a <script> tag with a "src" attribute. The idea here is that these externalized behaviors will get programmatically attached to the elements at some point during the document loading process, most likely after the window onload event fires, with the use of the DOM APIs which allow you to add/remove event handlers programmatically.
This practice prevent a browser that does not support the JS to crash on a particular page. Imagine you're browsing a site, your browser does not support JS and all the site links are one of the following ways:
<a href="javascript.void(0)"> Link A </ a>
<a href="#" onclick="funcao()"> Link B </ a>
This way you can not leave home because all the links use JS to set which page they should go. In this case the solution would actually put the real destination of the link and if necessary set the JS as follows:
index.html>
<script src="example.js" type="text/javascript"></script>
<a id="id_index" href="index.html">Home</a>
<a id="id_blog" href="blog.html">Blog</a>
<a id="id_contato" href="contact.html">Contact</a>
example.js>
var index = document.getElementById('id_index');
index.onclick = function(){
indexFunction();
return false;
}
function indexFunction(){
alert('here!');
}
The use of this technique may seem a little complicated and obscure at first, but from experience we find that the generated HTML code will be more readable and without the trouble of breaking if the browser that does not support JS.
You can learn more here!
2. A single HTML with multiple DIVs
It is a recommendation on developing widgets that we only use index.html file with all the screens of the widget in hidden DIVs. These screens can be grouped into different DIVs to implement the depths or "levels" (details in next post).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type=text/javascript src=js/callBack.js></script>
<script type=text/javascript src=js/main.js></script>
<script type=text/javascript src=js/common.js></script>
</head>
<body onload="init();">
<!-- Widget with 2 screens or 2 DIVs -->
<!-- First DIV -->
<div id="telaIcone" style="display:none">
<div id="menuLibras" class="menuLibras"></div>
</div>
<!-- Second DIV -->
<div id="telaInicialLibras" class="telaInicialLibras"
style="display:none">
<div class="topoLibras"></div>
<div class="rodape"></div>
<img id="librasImagens">
<div id="setaDireita" class="setaDireita"></div>
<div id="setaEsquerda" class="setaEsquerda"></div>
<div id="inputDados"></div>
<div id="btInterpretar" class="btInterpretar"></div>
<div id="retornaTelaIcone" class="retornaTelaIcone"></div>
</div>
</body>
</html>
3. Do not create styles depending on the ids
Another practice that i've adopted was to not set styles using the id attribute of HTML elements. I used names that could be referenced in HTML using the class attribute. Therefore the ids may be used freely by the developers without interfering with the work of designers. We may think like the developer is the owner of the functionality (use of ids and JS) while the designer is the owner of the layout (class and .css)
Thanks for your visit! :)
Next post: Widgets: Design Tips and Mandatory Requirements!
Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo
Nenhum comentário:
Postar um comentário