Guerra por los estándares

En el post anterior indiqué un problema común a desarrolladores que vienen de la vieja escuela, ilustrado en un sitio enviado a nosotros por una empresa a la que llamaremos "Silicio", claro que aquello no fue lo unico con lo que nos topamos.

En esa misma página, nos encontramos con lo siguiente:

...
<form onsubmit="buscar();">
...

Sólo por curiosidad buscamos la función "buscar", y nos encontramos con ésto:

<script type="text/JavaScript">	
  function buscar(){
    var f=document.forms[0];
    f.method='post'		
    f.submit();	
  }	
</script>

????!!!!!????!!!!!!
Por queeee???!!! En la mente de quién cabe hacer un javascript cuya unica funcion sea llevar a cabo la acción submit que ya de hecho la realiza por defecto todo formulario??? no sólo es un desperdicio de líneas de código, sino de tiempo para escribirlo, si por lo menos hiciera alguna validación aquí tendria sentido, pero no habia nada. la llamada al formulario y el script todo junto, se podría haber escrito así:

<form method="POST">

Como regla general, si lo que quieres hacer ya lo hace html o css nativamente, hazlo entonces con esas capas, para eso están ahi, sólo si no son capaces de hacerlo, entonces aplica javascript. Te ahorrará código y muchos dolores de cabeza, y mejor aún, tu página correrá suavemente, te será más compatible, y tendrás una verdadera tranquilidad tecnológica.

No esperen ver este código publicado, ya que nos encargamos de borrar estos horrores por nuestra cuenta, Silicio le dijo a nuestro cliente que tardaba 8 horas en solucionarlos (y les cobraba por eso), a nosotros nos llevó 19 minutos.

Esta semana apple publicó una serie de propuestas interesantes para incluir nuevas características en CSS:

• CSS Animation
• CSS Transforms
• CSS Transitions
• CSS Variables

Con esto CSS se adentra un paso más en la capa de presentación manejando animaciones, algo que ahora es dominio de javascript.

Animaciones CSS

Estas se hacen a través de keyframes, muchos de ustedes los conocerán por flash o svg, por ejemplo:

@keyframes 'wobble' {
  
  0 {
    left: 100px;
  }

  40% {
    left: 150px;
  }
  
  60% {
    left: 75px;
  }
  
  100% {
    left: 100px;
  }
  
}

Indica que al comienzo de la animación, el elemento estará a 100px a la izquierda, al 40% de la animación, a 150px, y así, por lo que el elemento se veria, en caso de durar 10 segundos:



Entonces, para aplicar esa animación, hacemos algo como:

#animado {
  animation-name: 'wobble';
  animation-duration: 10s;
  animation-iteration-count: 20;
}

lo cual animará al elemento con la id=animado, utilizando la animación que definimos arriba, durando 10 segundos, e iterándola 20 veces

Transformaciones CSS

El espacio de coordenadas de un objeto puede ser modificado a través de las transformaciones, esto es, puede rotarse, escalarse, trasladarse y hasta hacerle skew. Las transformaciones hasta pueden ser tridimensionales.

Esto significaría que podriamos hacer que todos los h2 estén rotados 20 grados, así diseños complejos no requerirán que se utilicen imagenes para el texto.

Transiciones CSS

Imagina que armas un menú, de fondo celeste, y que cuando pasas el mouse sobre él, con hover, haces que el color cambie a azul. Con las transiciones podrás indicar que ese cambio sea suave, y tenga una duración el el tiempo

Incluso se le podrá asignar un valor de easing, manejando así la aceleración

Variables CSS

Esta caracteristica se viene pidiendo desde que tengo memoria, plantea ciertas dificultades al momento de la implementación, por lo que siempre fue descartada, probablemente ahora le encuentren la vuelta para que sea por fin aceptada.

Con las variables puedes definir valores con alcance a toda la hoja de estilos identificados con un token y utilizables en todas las declaraciones CSS. Entonces por ejemplo si definimos un color de fondo que es común a varios elementos, entonces será facil modificarlos a todos de una sola vez cambiando solo una linea de codigo, lo mejor de todo es que esto puede ser aplicado dinámicamente a través de javascript

Por ejemplo:

@variables {
  CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
  background-color: var(CorporateLogoBGColor);
}

A simple vista se daran cuenta de lo facil que es.


Aun falta mucho para ver todo esto en nuestra navegación diaria, no sólo tiene que ser revisado y aprobado como estándar, sino que tiene que ser adoptado por los navegadores y finalmente por los diseñadores web.