Posterous
David is using Posterous to post everything online. Shouldn't you?
2s_thumb
 

La "Cheat Sheet" que todos hemos hecho alguna vez

Existen cientos de Cheat Sheet o chuletas que los desarrolladores de software creamos —y generalmente compartimos— con objetivo de reunir la información más relevante y práctica acerca del uso de un editor de textos complejo, un framework, un lenguaje de programación, un sistema operativo, una metodología de desarrollo y un largo etcétera.

Me ha sorprendido encontrarme con una Cheat Sheet muy similar a las que suelo acumular en mi espacio de trabajo, además de ser realmente completa al tratar un editor de textos complejo, a la par que genial, como es Vi.

Extraída de esta completa guía de uso de Vi.

Completando el post, no podría terminar sin recomendar una genial colección de las citadas Cheat Sheets especialmente bien estructuradas en mi opinión. Sintetizan temas muy interesantes para desarrolladores web como HTML, CSS, PHP y Ruby on Rails: Added Bytes Cheat Sheets.


Loading mentions Retweet
Publicado el 7/1/2010

0 Comentarios

CSS extendido con LESS

Ante lo tosco —sintácticamente hablando— que puede resultar un desarrollo CSS atendiendo a las especificaciones actuales, numerosos son los frameworks CSS o utilidades que surgen con el objetivo de flexibilizar este proceso.

LESS es una gema Ruby que nos permite generar ficheros CSS a partir de su propia especificación, que no es otra que una extensión de CSS con cuatro mejoras fundamentales:

Variables

Permite definir atributos en el documento CSS y asignarlos a múltiples clases, por lo que las modificaciones de estos atributos tienen repercusión de forma global.

#colors {
    @header: #fff;
    @wrapper: #000;
    @footer: blue;
}

A los que accederemos con:

.wrapper {
    color: #colors[@wrapper];
}

Mixins

Permite asociar todos los atributos de una clase a cualquier otra, permitiendo también el paso de parámetros a la primera, lo que a efectos prácticos la convierte en una función que devuelve una serie de atributos.

.bordered(@color: #fff) {
    border: 1px solid @color;
}

Reglas anidadas

Permite definir la jerarquía de clases en el DOM estableciendo unas claras reglas de herencia.

#header {
    background-color: #000;
    .wrapper {
        width: 960px;       
    }
}

Operaciones

Aporta un dinamismo relativo
 a la generación de CSS permitiendo aplicar operaciones aritméticas a valores y colores definidos en la hoja de estilo.

.wrapper {
    background-color: #888 / 2 + #000;
}

Para trabajar con LESS, una vez instalado en nuestro sistema a través de ruby-gems, editaremos un archivo con extensión .less que utilizaremos para generar el CSS estándar de forma automática a través de la gema.

Este es un buen ejemplo de código LESS y su correspondiente CSS generado aplicando la mayoría de sus mejoras (extraído de http://github.com/cloudhead/less/tree):

LESS
@dark: #110011;
.outline (@width: 1) { border: (@width * 10px) solid black }

.article {
    a { text-decoration: none }
    p { color: @dark }
    .outline(3);
}

CSS
.article a { text-decoration: none }
.article p { color: #110011 }
.article { border: 30px solid black }

Recordemos que no estamos hablando de CSS dinámico, sino de una especificación extendida del CSS estático que conocemos. Las técnicas de CSS dinámico requieren generalmente un servidor o intérprete y tienen objetivos adicionales a flexibilizar el proceso de desarrollo.

Para los más curiosos, LESS es open source bajo Licencia Apache y mantiene un repositorio público en github desde este proyecto.

Loading mentions Retweet
Publicado el 5/12/2009

0 Comentarios

Código fuente en Posterous con SyntaxHighlighter

Este es un breve recordatorio sobre la posibilidad de incluir código fuente formateado en nuestros posts a través de la librería JavaScript SyntaxHighlighter.

Basta con incluir nuestro código entre etiquetas code, pudiendo además indicar el lenguaje de cada fragmento de esta forma: 

[code lang='php'] 
  código PHP 
[/code ] (sin espacio antes del corchete de cierre)

Los lenguajes soportados son los incluidos en esta página del Wiki del producto (columna Brush aliases).

La librería está importada en el sistema Posterous por lo que sus opciones de configuración son limitadas, usándolo en nuestras propias aplicaciones web será posible personalizar los esquemas de resaltado de sintaxis a través de Temas CSS o incluir nuevos Brushes si es que aún necesitamos formatear código escrito en un lenguaje no soportado.

Algunos ejemplos:

PHP

function helloWorld() { 
 echo "Hello, World!"; 
} 

JavaScript

function helloWorld() { 
 alert("Hello, World!"); 
} 

Python

def helloWorld(): 
 print "Hello, World!" 

El correcto funcionamiento de este formateado de código depende del tratamiento HTML que nuestro cliente de correo electrónico realiza al enviar texto enriquecido. Algunos clientes incluyen cierto código HTML que será interpretado por SyntaxHighlighter y por lo tanto afectará al código original que deseamos destacar.

Ante estas dificultades —si tenemos conocimientos de XHTML— Posterous nos ofrece un editor HTML por lo que podremos eliminar el citado y molesto código sobrante de forma manual, algo en ningún caso justificable puesto que la comodidad y simplicidad de Posterous es uno de sus pilares y en este caso concreto brilla por su ausencia.

Enlaces de interés:

Loading mentions Retweet
Publicado el 2/12/2009

2 Comentarios

Resaltado de sintaxis en Aptana Studio

Los que pasamos muchas horas delante de un IDE vamos adoptando ciertas preferencias en cuanto a la paleta de colores más cómoda para resaltar sintaxis en nuestro editor de código. Si trabajamos con poca luz ambiental un contraste positivo (texto oscuro sobre fondo blanco) puede ser molesto e incluso hacer que nos cansemos o despistemos. Personalmente prefiero trabajar con un contraste invertido (texto claro sobre fondo oscuro), lo que en gran parte explica el estilo de este blog.

Aunque en Aptana Studio (conocido IDE basado en Eclipse) existe la posibilidad de personalizar nuestros esquemas de color, he reunido algunos esquemas creados por diferentes usuarios que me parecen especialmente cómodos:

Instrucciones de importación de estilos en los Editores
(Aptana maneja distintos Editores para los diferentes lenguajes):
  1. Abrimos las Preferencias de Aptana (variable según el sistema operativo)
  2. Abrimos el árbol de preferencias: Aptana -> Editors -> (Lenguaje) -> Colors
  3. Importamos el fichero de estilo a través del botón Import
Otra opción muy cómoda sería
  1. Abrimos las Preferencias de Aptana
  2. En el filtro de Preferencias (esquina superior izquierda) escribimos el texto "color" para mostrar únicamente las secciones de color para cada uno de los Editores disponibles en Aptana.
Enlace de interés (sobre la importación de estilos): How To Install An Aptana Color Theme
Loading mentions Retweet
Publicado el 27/11/2009

7 Comentarios

Distribución del Runtime Adobe AIR

Recientemente he trabajado con la tecnología Adobe AIR 1.5 en su perfil AJAX, que nos permite desarrollar RIA (Rich Internet Applications) como aplicaciones de escritorio multisistema. Aunque esta característica no es un concepto nuevo (otras tecnologías como Google Gears o Sun JavaFX tienen propósitos muy similares) y podríamos profundizar bastante en sus virtudes, hoy quiero centrarme en las condiciones de distribución del Runtime Adobe AIR.

Básicamente existen dos perfiles principales de distribución del Runtime, que recordemos es necesario instalar en las máquinas cliente para ejecutar nuestras aplicaciones.

  1. Distribución web
    A través de esta opción no es necesario firmar ninguna Licencia de Distribución siempre y cuando empleemos el medio de distribución web de aplicaciones Adobe AIR proporcionado por Adobe y conocido como Badge Install. Se trata de un pequeño script web (JavaScript y Flash) que tras una sencilla configuración permite descargar e instalar el Runtime desde los propios servidores de Adobe y nuestra aplicación (desde el servidor que decidamos, las condiciones de distribución afectan únicamente al Runtime) en un único proceso de instalación. 
  2. Distribución en soportes físicos (CD/DVD)
    En este caso debemos solicitar una Licencia de distribución a Adobe a través del un formulario en el que debemos aportar cierta información sobre el proyecto para el que solicitamos la licencia.

    Una vez Adobe haya estudiado y aprobado nuestra solicitud de licencia (puede tardar unos 3 días laborables), se nos aportará una completa documentación sobre las formas de distribución del Runtime junto a nuestras aplicaciones. Las posibilidades se reducen a la instalación del Runtime junto a nuestra aplicación (un único proceso de instalación "invisible" al usuario) o instalación del Runtime standalone seguido de nuestra aplicación (orientado principalmente a equipos IT que realicen la instalación de forma silenciosa a través de la intranet de su empresa).

Comentar también que la concesión de Licencia de distribución por parte de Adobe no nos da libertad total en cuanto al Runtime, por ejemplo no se permite su distribución con modificaciones por nuestra parte. Este es un extracto de la Descripción general de licencia aportada por Adobe referente a las condiciones que debemos cumplir al aceptar la licencia:

  • El receptor de la licencia puede distribuir el tiempo de ejecución de Adobe AIR a múltiples clientes en un entorno de intranet cerrado.
  • El receptor de la licencia puede distribuir el tiempo de ejecución de Adobe AIR a múltiples usuarios finales incluyendo instaladores del tiempo de ejecución de Adobe AIR en CD, DVD u otros soportes físicos.
  • El receptor de la licencia sólo puede distribuir instaladores de Adobe AIR para su uso en plataformas compatibles; por ejemplo, los dispositivos que no son PC y los sistemas integrados no son plataformas compatibles. Si desea volver a distribuir el tiempo de ejecución de Adobe AIR en sistemas operativos o dispositivos no compatibles, póngase en contacto con Adobe en la dirección license-air@adobe.com para obtener más información.
  • El receptor de la licencia puede distribuir los archivos del tiempo de ejecución de Adobe AIR como parte de su producto de software o incluidos en un instalador original.
  • El receptor de la licencia debe distribuir los instaladores y los archivos de Adobe AIR tal cual, sin ninguna modificación.
  • Los receptores de la licencia, si lo desean, podrán mostrar los logotipos "Includes Adobe AIR" ("Incluye Adobe AIR") en productos o sitios de la intranet, según las directrices de marcas comerciales de Adobe.
  • El receptor de la licencia no podrá distribuir el instalador o los archivos del instalador de Adobe AIR con el fin de evitar la instalación del tiempo de ejecución de Adobe AIR, una aplicación de Adobe AIR o el EULA.
  • El receptor de la licencia no podrá distribuir ni utilizar el tiempo de ejecución de Adobe AIR, sus bibliotecas, componentes o archivos del instalador de un modo no documentado. Consulte las preguntas frecuentes para obtener información más detallada.

El número de aplicaciones desarrolladas con esta tecnología crece día a día (probablemente todos nosotros tenemos alguna aplicación AIR instalada en nuestro sistema o incluso la utilizamos habitualmente —los tuiteros lo sabrán bien por clientes como TweetDeck—) y aparentemente el medio de distribución más utilizado es el web, lo que nos aleja de la citada maraña de condiciones de distribución, aunque es muy útil conocerlas cuando, como es mi caso, realizamos una distribución a través de soportes físicos.

Enlaces de interés:

Loading mentions Retweet
Publicado el 26/11/2009

0 Comentarios

Desarrollo CakePHP agilizado con TextMate

Llegó el momento de publicar el primer artículo (espero y deseo que de muchos) relacionado con CakePHP, uno de mis frameworks favoritos en cuanto a desarrollo de aplicaciones web. Es un framework escrito completamente en PHP, sigue el patrón de diseño MVC (Modelo-Vista-Controlador) y a través de una buena API, una gran comunidad de usuarios y un crecimiento exponencial de nuevas aplicaciones desarrolladas con ésta tecnología, está adquiriendo el reconocimiento que merece.


Muchos son los IDEs y editores de texto recomendados para el desarrollo de aplicaciones usando CakePHP (realmente casi cualquiera), aunque pocos son tan flexibles y rápidos como TextMate (versión exclusiva para Mac OS X, no gratuíto), que permite la integración de Bundles específicos de un lenguaje o framework para proporcionar una completa asistencia al desarrollador.

En el caso de CakePHP estamos de suerte ya que se inició un proyecto dedicado a proporcionar dicha asistencia en TextMate y que nos permite integrar el nuevo Bundle en nuestro editor siguiendo estas instrucciones:
  1. Verificamos que existe el directorio "~/Library/Application\ Support/TextMate/Bundles" (si no existe, lo creamos)
  2. Nos situamos en el directorio Bundles:
    $ cd ~/Library/Application\ Support/TextMate/Bundles
  3. Descargamos el bundle a través del repositorio SVN del proyecto:
    $ svn co http://svn.textmate.org/trunk/Review/Bundles/PHP%20Cake.tmbundle
Una vez hecho esto, volvemos a ejecutar TextMate (lo cerramos si ya estaba iniciado) y estará disponible una nueva sección en el Editor de Bundles:

Debemos tener claro que la citada asistencia al desarrollador a través de Bundles no convierte a TextMate en el editor imprescindible para desarrollar aplicaciones CakePHP, ya que un proyecto de cierta envergadura hará que un "simple" editor de textos como TextMate -aún con su gran flexibilidad- no sea suficiente y necesitemos recurrir a IDEs como EclipseAptana o NetBeans (los tres son multiplataforma).

Podríamos profundizar bastante para intentar acercarnos al IDE más aconsejable para CakePHP, pero la mayoría de IDEs modernos son suficientemente potentes y la decisión está vinculada al propio proyecto y/o preferencias en el equipo de desarrollo. Vuestras opiniones son bienvenidas.
Loading mentions Retweet
Publicado el 21/11/2009

4 Comentarios

Repositorios de Snippets para todos

Un buen medio de formación, inspiración o resolución de problemas de todo desarrollador de software siempre ha sido el código de ejemplo junto al API o manual de turno, es por ello que me gustaría recomendar algunos sitios web que recopilan Snippets o fragmentos de código con un propósito específico, modulares y por tanto reutilizables, escritos prácticamente en cualquier lenguaje. Algunos repositorios van más allá albergando scripts de sistema, ficheros de configuración de servicios, recomendaciones para el uso de editores de texto y un largo etcétera. 

La mayoría de estos sitios web incluyen completas posibilidades colaborativas, permitiendo así que cualquier usuario registrado pueda comentar y proponer alternativas o correcciones al contenido (en forma de Snippet) publicado por otro usuario.

Detallando el concepto de Snippet, las virtudes de este término de difícil traducción son:
  • Formación: Muchos de estos fragmentos de código pueden estar más optimizados que el nuestro, lo que nos ayudará a mejorar como desarrolladores.
  • Inspiración: Soy partidario de "curiosear" en estos enormes repositorios para captar ideas, metodologías o simplemente buenas prácticas a la hora de desarrollar software en uno u otro lenguaje.
  • Resolución de problemas: Una simple búsqueda en el repositorio puede generar múltiples resoluciones o alternativas a un planteamiento que nos está creando dificultades en el desarrollo.
  • Integración con IDEs y editores de texto potentes: Los IDEs y editores de texto más potentes permiten integrar estos fragmentos de código para insertarlos muy cómodamente en nuestro código. Como ya dije, el propósito de un Snippet debe ser específico, de esta forma podemos tener nuestra librería de funciones siempre disponible.

Éstos son los Repositorios de Snippets que alguna vez he utilizado y me han sido útiles:

Para finalizar el artículo, es cierto que hay otros muchos servicios similares principalmente orientados a la Resolución de problemas, por lo que la aportación de un usuario se reduce a Preguntas y Respuestas. Son servicios con alguna relación con los que hemos mencionado, aunque no con el mismo propósito. StackOverflow y Server Fault son algunos de estos útiles servicios de asistencia colaborativa.

Espero vuestras aportaciones en los comentarios o vía mi usuario en Twitter (@danguita), vuestros repositorios favoritos serán bienvenidos en esta lista.
Loading mentions Retweet
Publicado el 7/11/2009

1 Comentario