PDF de programación - hd magazine 05 201303

AÑO ----------- 0
NÚMERO -------- 5
FECHA: 2013-03-25

#5

“SWEET”

HD Hackers &
+

DEVELOPERS

Magazine digital de distribución
mensual sobre Software Libre, Hacking y Programación
para profesionales del sector de Tecnologías de la Información

Staff

Eugenia Bahit
Indira Burga
María José Montes Díaz
Milagros Infante Montero
Sergio Infante Montero

Arquitecta GLAP & Agile Coach

Ingeniera de Sistemas

Técnica en Informática de Gestión

Est. Ingeniería de Sistemas

Ingeniero de Software

Hackers & Developers Magazine se distribuye bajo una licencia Creative Commons Atribución
NoComercial CompartirIgual 3.0 Unported . Eres libre de copiar, distribuir y compartir este material.
FREE AS IN FREEDOM!

HD

Hackers &
DEVELOPERS
+

#4

Hackers & Developers Magazine, es
una iniciativa sin fines de lucro
destinada al fomento y difusión de
las tecnologías libres presentes o
futuras, bajo una clara óptica
docente y altruista, que resulte de
interés técnico y/o científico a
profesionales
de
sector
Tecnologías de
Información.
Hackers & Developers Magazine se
sostiene económicamente con el
apoyo de
comunidad, no
recibiendo subvención alguna de
ninguna empresa, organización u
organismo
Gobierno.
Necesitamos de tu apoyo para
poder mantener este proyecto.

del
la

de

la

Ayúdanos a continuar
con este proyecto
Puedes
hacer un donativo ahora,
de 10, 15, 25, 50, 100 o 150 USD
para ayudar a que Hackers &
Developers Magazine pueda seguir
publicándose de forma gratuita,
todos los meses. Puedes donar con
PayPal o Tarjeta de Crédito a través
del siguiente enlace:
www.hdmagazine.org/donar

CON TU DONACIÓN DE USD 150
RECIBES DE REGALO,

UNA FUNDA DE

NEOPRENE PARA TU
ORDENADOR PORTÁTIL

VALUADA EN USD 25.-
(Origen: Estados Unidos)

“Hacker es alguien que disfruta
jugando con la inteligencia”

Richard Stallman
Free Software, Free Society
(Pág. 97), GNU Press 2010-2012

En esta edición:
LESS – El lenguaje dinámico de estilos...................................................4
Estructura de datos en Python.............................................................10
Es un pájaro, es un avión ¡No! ¡Es PyOpenCL!......................................15
Unit Testing con PHPUnit y PyUnit......................................................20
Manual de Perl (Parte III)....................................................................26
Configurando GIT en Ubuntu Server ...................................................31
Pásate a GNU/Linux con Arch Linux: ¿Qué es ABS? y... ¿AUR?................36
Equipos Ágiles: Parte I.........................................................................42
Tengo que desarrollar un nuevo Software ¿por dónde empiezo?..........46
FirefoxOS App Days Barcelona.............................................................54

Y LAS SECCIONES DE SIEMPRE:
ASCII Art...................................................................... Pág. 59
Este mes: un recuerdo de la infancia
Zona U!........................................................................ Pág. 60
La comunidad de nuestros lectores y lectoras

Créditos

Hackers & Developers Magazine es posible gracias al compromiso de:

Responsable de Proyecto

Eugenia Bahit

Responsables de Comunicación

Indira Burga (Atención al Lector) - Milagros Infante (Difusión)

Staff Permanente

Eugenia Bahit

Arquitecta GLAMP & Agile Coach

www.eugeniabahit.com

Milagros Infante Montero

Estudiante de Ingeniería en Sistemas

www.milale.net

María José Montes Díaz

Técnica en Informática de Gestión

archninfa.blogspot.com.es

Sergio Infante Montero
Ingeniero de Software

neosergio.net

Indira Burga

Ingeniera de Sistemas
about.me/indirabm

Colaboran:

Celia Cintas, Laura Mora

Hackers & Developers Magazine agradece a los portales que nos ayudan con la difusión del proyecto:

Difunden:

www.debianhackers.net

www.desarrolloweb.com

www.desdelinux.net

E-mail de Contacto:
[email protected]

Hackers & Developers Magazine – Año 0, Número 5 4

LESS – El lenguaje
dinámico de estilos



B
E
W
O
L
L
O
R
R
A
S
E
D

Una manera de extender las hojas de estilo y
convertir al CSS en una especie de lenguaje de
programación.

Escrito por: Sergio Infante Montero (Ingeniero de Software)

Ingeniero Informático con estudios de Master de Dirección Estratégica
en TI. Ingeniero de software en Taller Technologies, activista,
contribuidor y consultor de proyectos FLOSS, miembro de APESOL y
escritor de artículos y libros técnicos de programación.
Perfiles:
http://about.me/neosergio
Twitter: @neosergio

U

no de los problemas más comunes cuando se está construyendo, ampliando o
modificando una hoja de estilo, es el no poder usar variables dentro del CSS.
Incluso podemos echar de menos el uso de funciones, parámetros y tratar al CSS

como una especie de lenguaje de programación.

Es así cómo Alexis Sellier (@cloudhead) influenciado por el trabajo de Hampton Catlin
(@hcatlin) con el SASS1, un metalenguaje de CSS, en 2009 diseña LESS2 como un
lenguaje de estilos dinámico.

LESS es un proyecto open source, que fue escrito al principio en Ruby, pero que luego
fue pasado a Javascript.

Lo resaltante de LESS es que puede funcionar desde el lado del cliente, el lado del
servidor y también puede ser compilado para generar CSS, así como también permite el
uso de mecanismos como variables, anidamiento, mixins, funciones y operaciones.

La manera de usarlo
La manera más simple de empezar a desarrollar con LESS es del lado del cliente. Sin
embargo, para entornos de producción y especialmente si se necesita mejorar el

1
2

http://sass-lang.com/


http://lesscss.org/



desempeño es muy importante pre-compilar less, usando node.js3 o alguna herramienta
de terceros4.

Puedes usar http://less2css.org/ para poder probar el preprocesamiento. Es una aplicación on-line y puedes ver el
resultado en el instante.

En este artículo veremos del lado del cliente y la configuración por defecto. Para ello
debemos descargar e incluir less.js dentro de nuestra página:

<script src="less.js" type="text/javascript"></script>

Cada hoja de estilo que hagamos con LESS, la debemos poner de la siguiente manera:

<link rel="stylesheet/less" type="text/css" href="estilos.less" />

Las variables
Son una de las características que mayor utilidad podemos encontrar. Veámoslo con un
ejemplo. Tenemos los siguientes estilos:

#elemento1 {

color: #ff0000;

}
#elemento2 {

}
#elemento3 {

color: #ff0000; float: left;

font-size: 2em; color:#ff0000; display:inline;

}

Imaginemos que queremos modificar el color (que es el mismo para todos los
elementos). Escribiendo como el CSS tradicional, el cambio tiene que hacerse línea por
línea y basta con imaginar un archivo más grande para darnos cuenta de lo terrible y
confuso que puede tornarse un cambio de color en una hoja de estilos.

Para este ejemplo entonces, con LESS tendríamos lo siguiente:

@color: #ff0000;
#elemento1 {

color: @color;

}

3
4

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS


https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js



©2013 HDMagazine.org – Creative Commons Atribución NoComercial CompartirIgual 3.0 Unported

Pág. 5

color: @color; float: left;

#elemento2 {

}
#elemento3 {

}

font-size: 2em; color: @color; display: inline;

El CSS con variables y anidamiento sabe mejor

De esta manera si deseamos cambiar el color sólo tendríamos que cambiarlo una vez, sin
importar la cantidad de estilos dentro de la hoja.

Las variables pueden ser utilizadas para definir colores, tamaños, porcentajes, valores y
demás.

El anidamiento
LESS también permite hacer anidamiento de estilos o lo que se le conoce como
estructura en cascada. Veamos un ejemplo:

#principal { margin: 10px; }
#principal .menu { float: left; font-size: 12px; }
#principal .dialogo { width: 400px; }
#principal .boton { margin:0 auto; }
#principal .boton:hover { background-color:#660066; }

En la sintaxis LESS sería de la siguiente manera:

#principal {

margin: 10px;
.menu { float: left; font-size: 12px; }
.dialogo { width: 400px; }
.boton {

margin: 0 auto;
&:hover { background-color: #660066; }

}

}

O si se desea, también de esta manera que luce más ordenada y se entiende mejor:

#principal
.menu
.dialogo
.boton
&:hover
}

{ margin: 10px;
{ float: left; font-size: 12px; }
{ width: 400px; }
{ margin: 0 auto;
{ background-color: #660066; }

©2013 HDMagazine.org – Creative Commons Atribución NoComercial CompartirIgual 3.0 Unported

Pág. 6

}

Este tipo de codificación ayuda incluso a entender la estructura DOM de la página;
también es muy útil para hacer anidamientos de media queries, ayudando así a que sean
muy entendibles los estilos que se están escribiendo.

Los Mixin
Un mixin es una clase que permite ser heredada por una subclase, pero no está pensada
para ser autónoma. Existen varios lenguajes de programación que usan mixins como por
ejemplo: C#, Dart, Javascript, Perl, Python, PHP, Ruby, Scala, Vala, entre otros.

En LESS podemos tener el siguiente ejemplo:

.resaltado {

font-size: 1.5em;
color: #ff9900;

}
#parrafo {

margin: 5px;
.resaltado;

}
footer {

padding: 10px;
.resaltado;

Esto provocaría el siguiente resultado en CSS:

}

}

}

#parrafo {

margin: 5px;
font-size: 1.5em;
color: #ff9900;

footer {

padding: 10px;
font-size: 1.5em;
color:#ff9900;

Se puede mezclar obviamente con variables y tendríamos un mejor resultado. Los mixins
pueden aceptar parámetros, por ejemplo:

.margenes (@espacio: 3px) {

margin-top: @espacio;
margin-bottom: @espacio;

}

©2013 HDMagazine.org – Creative Commons Atribución NoComercial CompartirIgual 3.0 Unported

Pág. 7

.margenes;

nav {

}
section {

}
footer {

.margenes(5px);

.margenes(