aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

La gente de Woork ha escrito un interesante artículo en el que nos cuentan unas pautas con las que conseguir un CSS más fácil de mantener. A simple vista son unas pautas lógicas y que con un poco de experiencia consigues aplicarlas y optimizas sustancialmente el tiempo de mantenimiento de tu código.

Intentaré hacer una pequeña traducción de las mias, aportando mi visión del tema.

1) ¿Uno o multiples ficheros?

Muchos son los desarrolladores que usan multiples ficheros CSS para tener el código separado y quizas así consigan un poco más de control sobre el código, por otro lado he visto larguísimos ficheros CSS con miles y miles de líneas para evitar esto, lo que supone otro problema.

@import "file1.css";
@import "file2.css";
@import "file3.css";

Mi opinión? Pues depende mucho del proyecto, la complejidad del mismo y de la optimización que deseemos aplicar a cada una de las páginas. Si estamos desarrollando un theme para Wordpress quizas la opción más apropiada se la de usar un solo CSS ya que este no va a crecer exageradamente, pero si por contra estamos desarrollando una página con una cantidad considerable de secciones/opciones sería conveniente dividir y pensar en optimizar la carga de cada una de las secciones/opciones.

2) Tabla de contenidos, ¿Sirven para algo?

Hace poco más de un año debatimos sobre el tema de los comentarios en el CSS, y la opinión general sobre el tema fué que había que encontrar un término médio y no crear una página CSS con más comentarios que código CSS.

En Woork explican que en alguna ocasión las han usado para los casos en los que se ha usado un único fichero CSS y de esa forma consiguen un poco de claridad del código insertado despues. Por contra en el caso de múltiples ficheros te ves obligado a ir actualizando varios ficheros cada vez que realizas un cambio en la estructura. 

/**
* @style       Standard Layout
* @media       screen
* @version     1.0
* @author      Franky
* @copyright   Franky’s pwn comp-a-ni
* @licensor    da customa
* @layout      in pixels:
*              |            788            |
*              | 10  |      768       | 10 |
*              | 10  | 27 |    741    | 10 |
*/

Mi opinión? El documentar es bueno, hay que documentar nuestro código en medida que sea fácilmente comprensible por una persona ajena a lo que estás haciendo pero nada más. Osea hay que decir lo justo, ni más ni menos, pero hay que decir algo. Usando un sistema jerarquico lógico bastaría para clarificar nuestro código.

3) Crear secciones para agrupar atributos similares

Una técnica que tambien te encuentras mucho por Internet es la de separar en secciones el CSS. Estas separaciones tienen un sentido y es el de agrupar atributos similares. Por ejemplo los que definen el tamaño, posición y aspecto.

#content {
	height:200px;
	width:760px;
	margin:0 auto;

	background-color:red;
	color:#000;
}

Mi opinión? Implica un reciclaje para los que no lo hacen, pero ayuda. El ver a simple vista todos los atributos que hacen un elemento esté en esa posición o tenga ese tamaño es un ahorro de tiempo considerable para futuras actualizaciones del código.

4) Tabular el código

Una técnica que da una calidad estética a los ficheros CSS es el tabular los valores de los atributos frente a los atributos. Esto muestra muy claramente el código de nuestro fichero.

#content {
	height:		    200px;
	width:		    760px;
	margin:		    0 auto;

	background-color:   red;
	color:		    #000;
}

Mi opinión? Pese a no hacerlo nunca, reconozco que más que una mejora visual es una ayuda a la comprensión del código para alguien ajeno a él.

Como nos tienen acostumbrados, los chicos de NETTUTS nos enseñan a montar desde 0 nuestra propio iGoogle. Podemos ver el resultado y descargar el código fuente para probarlo y usarlo en nuestras aplicaciones web.

Actualización

He estado haciendo alguna prueba y he montado una pequeña función en jQuery para crear widgets dinámicamente desde nuestras aplicaciones.

function insertWidget(where, opt) {
    var selectorOld = iNettuts.settings.widgetSelector;
    iNettuts.settings.widgetSelector = '.new';
    salida = '<li class="new widget color-'+opt.color+'"><div class="widget-head"><h3>'+opt.title+'</h3></div><div class="widget-content"><p>'+opt.content+'</p></div></li>';
    $(where).append(salida);
    iNettuts.addWidgetControls();
    iNettuts.makeSortable();
    iNettuts.settings.widgetSelector = selectorOld;
}
//Ejemplo 
insertWidget("#column1", {
    color: "blue",
    title: "Prueba",
    content: "ESTO ES UNA PRUEBA"
});

La gente de Smashing Magazine ha confeccionado una lista de herramientas que nos ayudan cada día con nuestro código. Aunque la mayoría las conocíamos ya, siempre esta bien tener un listado como este para momentos de lapsus.

1. Firebug (Oh Dios!) (FF)
2. Web Developer Toolbar (FF)
3. YSlow (FF)
4. Internet Explorer Web Developer Toolbar (IE)
5. Fiddler (IE)
6. Debug Bar (IE)
7. HttpWatch (IE/FF)
8. Live Http Headers (FF)
9. Web Accesibility Toolbar (IE/OP)
10. Fangs (FF)
11. Venkman Javascript Debuger (FF)
12. ColorZilla (FF)
13. Fireshot (FF)
14. Web Inspector (WK)
15. FireFTP (FF)

FF - Firefox, IE - Internet Explorer, OP - Opera, WK - WebKit

The Man In Blue siempre nos ha delitado con maravillas desarrolladas en Javascript y hoy nos trae JS-909 . Una aplicación que nos permite crear música a base de sonidos.

Si le echamos un vistazo al javascript, vemos que usa un sistema de data:URI para almacenar los sonidos de los que disponemos en la página. Sin duda una muestra más de que Javascript está cambiando su concepto que hasta ahora teníamos.

Al fin ha terminado la encuesta para decidir cuales serían los iconos que formarán parte del menú lateral de Wordpress 2.7.
El aspecto, que podemos ver en la imagen siguiente, ha sido el seleccionado con un 35% de los votos y es una creación de Ben Dunkle.

Los chicos de CSS Trick nos muestran un reloj formado por una estructura basa en <ul></ul> que nos permite mostrar un reloj de manillas que se moverán con Javascript (jQuery) y el uso de transformaciones CSS3.

// HTML
<ul id="clock">
   	<li id="sec"></li>
   	<li id="hour"></li>
	<li id="min"></li>
</ul>
// JS
$(document).ready(function() {

      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";

      $("#sec").css("-webkit-transform", srotate );

      }, 1000 );

      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";

      $("#hour").css("-webkit-transform", hrotate );

      }, 1000 );

      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";

      $("#min").css("-webkit-transform", mrotate );

      }, 1000 );

});

Si nos fijamos en el código Javascript, vemos que únicamente nos funcionará en navegadores basados en WebKit y es que lo que hacemos es aplicar el estilo -webkit-transform: rotate(); a los elementos que componen las manillas del reloj.