Marketing

No mezclar la estructura con la presentación ayuda en el trabajo de mantenimiento, modificación y mejora de nuestras aplicaciones. El código que hace años usabamos esta dando lugar a otro más complejo y fácil de mantener.

ANTES

HTML:
<table border="0" cellpadding="0" width="100%" cellspacing="5">
<tr>
 <td><font face="Arial" size="-2">Lorem Ipsum</font></td>
</tr>
</table>

AHORA

CSS:
body {font-family:Arial,sans-serif;font-size:12px;}
p {padding:5px;}

HTML:
<p>Lorem Ipsum</p>

Javascript

Cada vez más la accesibilidad es un requisito. En estos casos el javascript se minimiza y se si se usa estas son guias basicas para un javascript accesible:

1. Nunca, bajo ninguna circunstancia incluyas javascript directamente en el documento.
Nota: Utilizar ficheros externos.

2. Javascript es una mejora, no un sistema de seguridad.
Nota: evitar onlick utilizar onsubmit.

3. Checkea la disponibilidad de un objeto antes de acceder a él.
Con “if” se evitan errores por indefición de objetos, atributos y funciones.

5. No uses variables de otros scripts.
Utilizar variables locales en medida de lo posible para evitar que se modifiquen en distintos scripts.

6. Mantén los efectos de ratón de forma independiente

• Priorizar el uso de onsubmit.
• Usar “onmousedown” con “onkeydown”.
• Usar “onmouseup” con “onkeyup”
• Usar “onclick” con “onkeypress”

Ejemplo: Rediseño de rollovers accesibles

ANTES

HTML:
<a href="index.html"
onmouseover="image1.src='1on.gif'"
onmouseout="image1.src='1off.gif'">
<img src="1off.gif" name="image1" border="0" height="150" width="150"
alt="home"></a>

AHORA

HTML:
<a href="index.html"><img src="home.gif" id="home" alt="home"></a>

Javascript:
function findimg()
{
 var imgs,i;
// Loop through all images, check if they contain the class roll
 imgs=document.getElementsByTagName('img');
 for(i=0;i<imgs.length;i++)
 {
  if(/roll/.test(imgs[i].className))
  {
// add the function roll to the parent Element of the image
  imgs[i].parentNode.onmouseover=function(){roll(this);};
  imgs[i].parentNode.onmouseout=function(){roll(this);};
  imgs[i].parentNode.onfocus=function(){roll(this);};
  imgs[i].parentNode.onblur=function(){roll(this);};
  }
 }
}
function roll(o)
{
 var i,isnode,src,ftype,newsrc,nownode;
// loop through all childNodes
 for (i=0;i<o.childNodes.length;i++)
 {
  nownode=o.childNodes[i];
// if the node is an element and an IMG set the variable and exit the loop
  if(nownode.nodeType==1 && /img/i.test(nownode.nodeName))
  {
   isnode=i;
   break;
  }
 }
// check src and do the rollover
 src = o.childNodes[isnode].src;
 ftype = src.substring(src.lastIndexOf('.'), src.length);
 if(/_on/.test(src))
 {
  newsrc = src.replace('_on','');
 }else{
  newsrc = src.replace(ftype, '_on'+ftype);
 }
 o.childNodes[isnode].src=newsrc;
}

window.onload=function(){
 findimg();
}

Popularity: 38% [?]

• Agregar un comentario...