La aplicación permite a los clientes reservar pistas de pádel mostrando de forma visual y clara las pistas y horarios disponibles. Tiene un acceso para administradores que permite la gestión de socios del club y de reserva y cancelación de pistas.

Tecnologías empleadas: CodeIgniter, CSS, xHTML, jQuery y MySQL.

La empresa requiere de una presencia en Internet para dar a conocer sus servicios y mostrar las trabajos realizados. Para llevar a cabo el proyecto se le diseña el interfáz de usuario y se programa una plantilla a medida para WordPress que haga uso de librerias JavaScript para mostrar los trabajos de forma vistosa.

Tecnologías empleadas: CMS WordPress, PHP, jQuery, MySQL.

Cuando Joel ideó éste test, el desarrollo web aún estaba en sus primeras fases y el test se aplicaba fundamentalmente al desarrollo tradicional de software de escritorio. Tras leer el artículo original de Joel y algunas adaptaciones al desarrollo web del test, me atrevo a realizar mi propia adaptación que en realidad se asemeja bastante a la propuesta por Brandon Savage.

Mi Test de Joel modificado para el desarrollo Web sería:

1. ¿Usas control de versiones?
2. ¿Puedes preparar una versión distribuible de la aplicación en un solo paso?
3. ¿Estás usando integración continua?
4. ¿Tienes un sistema para el bug tracking?
5. ¿Pones solución a los bugs antes de seguir escribiéndo nuevo código?
6. ¿Mantienes continuamente actualizado tu calendario de desarrollo?
7. ¿Tienes una hoja de especificaciones para la aplicación que estas construyendo?
8. ¿Te sientes cómodo en tu lugar de trabajo?
9. ¿Usas las mejores herramientas aunque sean caras?
10. ¿Tienes beta-testers?
11. ¿Es tu aplicación usable?

Simplemente contestando si o no a éstas 12 preguntas podemos averiguar si nuestro proceso de desarrollo es el adecuado o no para poder producir aplicaciones web de calidad. Y todo ésto en menos de 5 minutos al contrario de otras complicadas y laboriosas técnicas de medida de calidad del software cómo por ejemplo las desarrolladas por el prestigioso Carnegie Mellon.

1. ¿Usas control de versiones?

Desde mi punto de vista fundamental. En cualquier flujo de trabajo, sea cual sea la metodología empleada, debería de contemplarse un sistema de control de versiones. Yo uso Subversion, pero puedes usar también Git que cada vez gana mas adeptos. Además tienes el servicio github.com que es una maravilla.

2. ¿Puedes preparar una versión distribuible de la aplicación en un solo paso?

La estructura de la aplicación web debe permitir que seas capaz de trasportar la aplicación a otro servidor Web en un solo paso. O al menos en 3 micropasos: copiar todos los archivos, copiar la base de datos y editar el único archivo de configuración con los datos del nuevo servidor.

3. ¿Estás usando integración continua?

En la versión original del test, éste punto trata sobre poder construir una versión ejecutable diaria de la aplicación. ésto no tiene mucho sentido en el desarrollo de webs, por lo que es conveniente poder realizar una integración continua.

Con integración continua me refiero a realizar Pruebas de Unidad, realizar Refactoring y mantener una buena documentación.

Para las pruebas de Unidad podemos usar PHPUnit o si como yo usas el framework CodeIgniter, tienes a tu disposición la clase Unit Testing incluida en el propio framework.

El Refactoring es una tecnica de Ingeniería del software que consiste en reescribir nuestro código para que sea mas legible pero sin alterar su funcionamiento. Para ello podríamos seguir algunas guías de estilo para tener un código que pueda entenderlo rápidamente cualquier programador ajeno a nuestro proyecto.

Para el tema de la documentación casi siempre he usado Doxygen, pero también está muy extendido phpDocumentor. Una buena documentación es imprescindible para poder escalar nuestra aplicación en un futuro y poder extenderla con mas funcionalidades.

4. ¿Tienes un sistema para el bug tracking?

Se necesita llevar un control de todos los bugs que se van encontrando en la aplicación. Se debe anotar 4 cosas:

• Pasos que se han seguido para que de lugar el error.
• El comportamiento que se debería esperar en lugar del error.
• El comportamiento qeu se ha obtenido (el error en sí)
• A quien se le asigna el estudio de éste bug (en caso de haber mas componentes en el desarrollo)
• Si ha sido resuelto el bug o no.

Para llevar un control de ésta información nos bastaría con un simple documento de 4 columnas para anotar los puntos anteriores aunque lo reocmendable es usar sistemas pensados para ello. Mi preferido: TRAC, aunque hay otros como Mantis

5. ¿Pones solución a los bugs antes de seguir escribiéndo nuevo código?

Si tienes una pila de bugs por corregir, no tiene sentido que sigas escribiéndo mas código, párate a resolver antes los problemas encontrados.

6. ¿Mantienes continuamente actualizado tu calendario de desarrollo?

Estimar las horas de desarrollo de una aplicación es terriblemente difícil, aun dividiendo la estimación en pequeñas partes. Aun así, es fundamental tener una hoja de ruta con fechas que iremos actualizando casi a diario para poder ajustarlo a la realidad.

7. ¿Tienes una hoja de especificaciones para la aplicación que estas construyendo?

Es necesario tener una lista de requerimientos que busca el cliente que tenga la aplicación, complementándose con los requerimientos que tu como desarrollador piensas que tiene que tener. Nos servirá para poder confeccionar el calendario del que hemos hablado en el punto anterior. Si no tienes una hoja de especificaciones, el desarrollo se puede convertir en un viaje sin rumbo en el que la pérdida de tiempo está asegurada. Es muy importante tener varias entrevistas con el cliente para acordar de forma clara Qué debe hacer y cómo lo debe hacer la aplicación.

8. ¿Te sientes cómodo en tu lugar de trabajo?

Para programar se necesita un lugar calmado. Nada de télefonos alrededor. Nada de distracciones de ningún tipo. Cuando estás programando tienes en tu cabeza mil ideas que pueden derrumbarse como un castillo de naipes si tan solo vienen a preguntarte algo en el momento equivocado. Si el trabajo va a ser en equipo habrá que estabelcer algunas normas para que ésto no suceda y todos los integrantes sean lo mas productivos posibles.

Cuando estás programando, estás programando, no puedes estar realizando otras tareas a la vez, asi de simple. Si lo haces, tu productividad se verá tan sumamente perjudicada que no podrás avanzar nada. Es algo que en muchas empresas deberían comprender.

Cubículos, oficinas, tu propio sitio de trabajo en casa, en mi opinión da igual mientras te sientas cómodo.

9. ¿Usas las mejores herramientas aunque sean caras?

Aunque tenemos la suerte de que hoy por hoy existe muchas herramientas de software libre y que ademas en la mayoría de los casos son gratuitas, en algunas ocasiones nos encontramos que la mejor herramienta para alguna determinada tarea es de pago. Si verdaderamente queremos sacar el mejor provecho de nuestro esfuerzo, será mejor que nos hagamos con esa herramienta. Si trabajamos para alguna empresa, ésta nos debería proveer de libros técnicos especializados, buenos equipos y buen software. Sin duda, es una inversión que les será altamente rentable.

10. ¿Tienes beta-testers?

Aunque le apliquemos pruebas de unidad, etc, como dijimos en el punto 3, es altamente recomendable ayudarnos de algunos beta testers que nos puedan dar una visión mas humana de las posibles carencias de nuestra aplicación. Incluso si el conocimiento a nivel técnico de éstos beta-testers no es muy alto, pueden darnos una idea del grado de usabilidad que tiene nuestra aplicación.

11. ¿Es tu aplicación usable?

La facilidad de uso de nuestro aplicación puede ser el punto que decida si será un éxito o no. Diseños mas simples y menos recargados, conjuntamente con interfaces intuitivos y fáciles de manejar harán de nuestra aplicación una apuesta segura. Cuidaremos especialmente, la paleta de colores elegida, la tipografía y la disposición del contenido.

12. Los nuevos candidatos para tu proyecto, ¿han demostrado cierto nivel técnico en programación?

Éste punto solo es aplicable si hablamos de grupos de desarrollo compuestos por varios programadores. Los nuevos aspirantes a trabajar en tu grupo deberían antes demostrar de algun modo que poseen los conocimientos suficientes para poder desenvolverse con soltura a la hora de programar código. No vale decir: “Tengo un curso de X y otro de Y”. HAy que saber programar y tener una visión global de lo que es el desarrollo de software.

En conclusión, podemos hacer uso de éste test para:

1. Puntuar tu modo de desarrollar aplicaciones web o la de la empresa para la que trabajas.
2. Si eres el jefe de un equipo de programadores, éste test te puede servir como orientación para que puedas conseguir lo máximo de ellos.
3. Si estás buscando un trabajo como programador web, puedes consultar con tu entrevistador que puntuación obtienen con éste test. En caso de obtener una puntuación baja asegúrate de que tendrás la autoridad suficiente para poder cambiarlo, de lo contrario ten por seguro que te sentirás frustrado trabajando para ellos.

Las principales noveadades e ésta nueva versión son:

• Compatible con PHP 5.3.0
• Se ha añadido una nueva clase para gestionar carritos de compra: Cart Class
• Se ha mejorado el Form helper
• Se ha añadido la función is_php() para permitir comparaciones entre distintas versiones de PHP.
• Ahora la función show_error() permite enviar códigos de estado HTTP.
• Se han corregido muchos bugs.

Para un informe mas detallado de los cambios puedes consultar el changelog de la 1.7.2

Para los que no conozcáis CodeIgniter, deciros que es un framework de desarrollo en PHP que agiliza el desarrollo de tus aplicaciones y te evita tener que estar reprogramando una y otra vez las mismas cosas para proyectos distintos.

Solo se le achacaba que era un editor bastante pesado de cargar debido a su gran cantidad de JavaScript. Ahora ésto ha cambiado, se ha reducido gran parte de éste código y se le ha añadido un nuevo interfaz mas moderno, ademas se le ha dotado de una mayor accesibilidad y docenas de mejoras adicionales que le confieren un mejor rendimiento.

Solo faltaba una cuestión mas: su nombre. FCK proviene del nombre de su creador Frederico Caldeira Knabben, pero también es la abreviatura de la palabra inglesa fuck (en español: joder) por lo que a muchos pudiera llevar a equivocación.

A causa de ésto se le ha rebautizado como CKEditor, que aunque sigue conservando las iniciales de sus apellidos, ahora suena mucho mejor.

Permite usar plugins y crear los nuestros propios a traves de su API Javascript. Es totalmente personalizable en cuanto al color de su interfaz, varios themes y archivos CSS.

CKEditor tiene licencias Open Source por lo que puedes usarlo en tus proyectos de forma libre y ademas incorpora una API para que puedas retocarlo a tu gusto.

Demo: Probar CKEditor

Descarga: Descargar CKEditor 3.0

• MAMP. Me permite montar un servidor Apache/PHP/MySQL de forma instantánea sobre la cual programo las aplicaciones. Permite configurar muchos aspectos tanto de Apache, PHP cómo de MySQL.
• Firefox. Mi navegador de internet predeterminado y dónde pruebo mis aplicaciones web.. Dos extensiones son imprescindibles: Web Developer Toolbar y FireBug para ayudarme con la maquetación CSS y depurar errores respectivamente.
• Coda. Es un Editor de texto, de CSS y cliente de FTP todo en uno. Es una suite muy completa que te permite tener en una sola ventana todo lo que necesitas para codificar, maquetar con CSS y subir al servidor. Lo suelo usar para proyectos pequeños/medianos por su rapidez y sencillez.
• Querious. Es un cliente de bases de datos MySQL. Ideal para crear/modificar/insertar en la base de datos. Una interfaz muy cuidada.
• Fireworks. Es el editor de imágenes que uso por defecto. Con él creo el mockup de la web para luego generar las diferentes imágenes necesarias.
• Picturesque. Para la edición rápida de imágenes a las que quiero redondeale las esquinas y añadir un reflejo. Ahorra bastante tiempo.
• Things. Para organizar el trabajo sigo los principio de la filosofia GTD (Getting Things Done). Ésta aplicación es sencillamente fantástica por la manera rápida en la que te permite llevar un seguimiento de tu trabajo y hacer de ti una persona mucho mas productiva.

Para los proyectos un poco mas grandes, que necesitan de una codificación mas extensa suelo usar:

• TextMate. La razón principal por la que me vine a Mac. Es difícil explicar lo que es, pero una posible definición sería: editor de texto avanzado con coloreado de sintaxis y posibilidad de extender sus posibilidades al infinito gracias a innumerables plugins. No solo es compatible con muchos lenguajes de programación (completado de palabras, templates…) sino que me permite usar un completado de palabras para mi framework PHP favorito, CodeIgniter. Ademas uso el plugin de SubVersion para poder tener sincronizado mi trabajo desde varios ordenadores y llevar el control de versión.
• CSSEdit. El mejor editor CSS. La forma mas rápida de trabajar con tu hoja de estilos. Permite previsualización de los cambios que vas haciendo en tiempo real.
• CyberDuck. Cliente de FTP gratuito. También he usado Transmit, pero al final siempre vuelvo a éste. Tambien uso de vez en cuando FileZilla, aunque su interfaz es bastante feo.

Cargando la librería jQuery en nuestro HTML

Vamos a ver lo más básico de jQuery, lo primero que haremos es crear un archivo HTML  llamado index.html con el siguiente contenido:

    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript"></script>
    <a href="http://jquery.com/">jQuery</a>

Segun hemos establecido en el atributo src, tenemos que establecer el archivo jquery.js en el mismo directorio de nuestro archivo index.html.
El archivo jquery.js, es decir, la libreria jQuery lo puedes descrgar de:

Ejecutando código al cargar la página

Los programadores JavasScript estarán acostumbrados a usar código de éste tipo:

 window.onload = function(){ alert("welcome"); }

Pero con jQuery, si queremos ejecutar algo justo despues de que se cargue la página,tendremos que usar el evento jQuery llamado “evento ready”:

 $(document).ready(function(){
   // Aqui va el codigo
 });

Vamos, por ejemplo, a hacer que se muestre una ventana con un mensaje cuando pulsemos el enlace de nuestra página.

 $(document).ready(function(){
   $("a").click(function(event){
     alert("Hola Mundo!");
   });
 });

Guarda el archivo index.html y ábrelo para ver el resultado, deberias ver una ventana con le mensaje “Hola Mundo” cuando pulses el enlace.

Lo aconsejable, para conseguir un código mas limpio y legible, es poner nuestro código jQuery en archivos .js y luego cargarlos en nuestro HTML del mismo modo que hemos cargado el archivo jquery.js, pero para nuestro tutorial lo pondremos todo en el HTML, asi pues, el ejemplo completo quedaría así:

   <script src="jquery.js" type="text/javascript"><!--mce:2--></script>
   <script type="text/javascript"><!--mce:3--></script>

   <a href="#">jQuery</a>

Añadiendo y quitando clases CSS

jQuery también nos permite de forma fácil, añadir y eliminar clases CSS. Para ver un ejemplo, primero añadimos algo de estilo CSS a nuestro HTML:

Podemos por ejemplo hacer que al clickar sobre el enlace, se añada una clase CSS al enlace para que el texto se muestre en negrita:

$("a").addClass("test");

Para eliminar la clase hacemos lo siguiente:

$("a").removeClass("test");

Animaciones

La libreria jQuery tiene una gran cantidad de efectos y animaciones para dotar de dinamismo a nuestras webs. Veamos por ejemplo, como hacer desaparecer el enlace al clickar sobre él:

 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

Ésto debe servirte como punto de partida, con jQuery se pueden hacer muchisimas cosas mas, para aprender mas te recomiendo que leas la documentación oficial de jQuery en http://docs.jquery.com/Main_Page

Ahora es el turno de los antivirus, Panda, empresa española creadora de Panda Antivirus nos trae una solución gratuita para Windows que libera a nuestro ordenador de la carga que supone ejecutar un antivirus, ya que todo lo hace desde la nube. Ésto supone que tánto las actualizaciones de la base de virus como loa analisis serán transparentes al usuario ya que no nos daremos ni cuenta.

Aunque soy usuario de Mac OSX y Gnu/Linux principalmente, en el trabajo me toca “sufrir” una máquina Windows, propensa a contagiarse con toda clase de virusm y e spor eso que he querido probar éste nuevo antivirus.

Personalmente he visto una gran mejora en el rendimiento de la aplicación, va mucho mas ligero que versiones anteriores de Panda Antivirus. El interfaz es limpio y claro y con las opciones justas para no perderse. Lo que he podido probar de él hasta ahora me ha gustado mucho. Sin duda, una opción a considerar para nuestros equpos Windows.

El antivirus está disponible para descarga gratuita desde la web: http://www.cloudantivirus.com/

Comentaros que gracias a Panda Security y bitacoras.com, si sois bloggers, podeís ganar un netbook sólo por hacer un review como el mio, si vuestro post es elegido por un jurado compuesto por miembros de Panda Security. Podéis leer las bases en la web de bitacoras.com

Es por eso que acabo de lanzar la primera versión de la librería de CodeIgniter para el API de Flickr con la que podrás trabajar cómodamente sobre el API de Flickr usándola como una librería de CodeIgniter.

Basta con que copies el archivo Flickr.php dentro del directorio system/application/libraries y accedas a cualquier método desde tu controlador de éste modo:

$this->flickr->call('metodo', array('parametro1'=>valor,'parametro2'=>valor2));

dónde con “metodo” le indicamos el método del API de Flickr al que queremos acceder y en el array le indicamos los distintos parámetros con sus correspondientes valores.

Puedes encontrar la documentación completa y el enlace para la descarga en la sección “Código”:

Libreria CodeIgniter para Flickr API

“The Web Development Project Estimator” es una herramienta que permite a los desarrollares y diseñadores web a estimar de una forma rápida el tiempo y materiales necesarios para un proyecto y su coste total.

Basta con introducir el título del proyecto y tu tarifa por hora, se ajustan las horas estimadas para cada tarea y se obtiene una estimación del coste lista para ser descargada en formato PDF.