Blog de sonicbyte

Hablamos sobre nuestras experiencias e ideas en diseño y desarrollo web.

rssrss

Metaprogramación Ruby

30 marzo, 2012
Ruby Metaprogramming

En el post anterior os contaba mi experiencia en el Codemotion. Esta vez os dejo el vídeo de la charla “Metaprogramación Ruby” que dió Sergio Gil @porras en el evento Codemotion Madrid del 24 de Marzo.

Disculpad la calidad, está grabado con una cámara de fotos, aunque creo que se entiende perfectamente. Debajo tenéis también las slides, para seguir mejor la charla.

Comentarios: 0

Codemotion 2012: mi experiencia

26 marzo, 2012
Mi codemotion 2012

El pasado sábado 24 de Marzo pude asistir al evento Codemotion en Madrid y me traje de allí una mochila de experiencias, momentos e ideas que quiero compartir.

La aventura empezó el sábado por la mañana, más bien por la madrugada, a las 4 se movilizaba parte del comité cachirulístico, Iván Loire @ivanloire, Fernando Val @aaromnido, Dani Latorre @dani_latorre, Alberto Velaz @alberto_velaz y yo @pablojimeno. Entre risas y rock and roll, con la ayuda de más navegadores GPS que humanos en el coche, llegamos a la Escuela Universitaria de Informática de la Universidad Politécnica de Madrid. Y poco después los primeros reencuentros que siempre produce una gran alegría y algunas presentaciones. Por ejemplo el amigo Gonzalo (a.k.a “acertijo”, “el hombre de los mil avatares”), Javier Martínez @supercoco9 cuya charla os contaré luego, David (a.k.a “Hole lotta love“) @david_bonilla, y su inseparable compañero Jero @jerolba, Kini @kinisoftware, el Beas @jmbeas, Jesús @jjballano, Alvaro @ahachete, Arturo Herrero @ArturoHerrero y otros.

Además de las conversaciones de pasillo que son de lo mejor de estos eventos, hubo muy buenas charlas y como había tantos tracks, contaré algo de las que pude presenciar, me perdí muchas otras y espero leer algo en estos días. En mi particular RubyConf pude asistir a las charlas de:

Codemotion 2012 - MadridSergio Gil @porras, Metaprogramación Ruby, traicionando a mi amigo Iván que presentaba la suya de Node ;) Excelente charla la de Sergio, desmitificando desde la definición, hasta el uso de metaprogramación con mucho humor. Aquí ha publicado las slides con ejemplos.

Codemotion 2012 - MadridJavier Ramirez @supercoco9, APIs REST usables, gran espectáculo y mejor contenido el que nos ofreció, muchas buenas ideas y ejemplos para mejorar la experiencia de los desarrolladores que trabajarán con el API de tu producto. Esta charla fue grabada, supongo que pronto estará colgada en el sitio de codemotion. Aquí están sus slides. Y su empresa (aspgems) está organizando una no-conference para el día 12 de Abril sobre el tema de API más información en usemyapi.com

Constantes en Ruby por Xavier NoriaXavier Noria @fxn, Constantes en Ruby, la más hardcore como comentamos con Dani Latorre, de todas las charlas a las que asistí. Muy interesante y de muy alto nivel. Una pena que haya sido la última de la tarde, porque realmente estaba muy cansado y sé que podría haberla aprovechado más en otro horario. PD: esta es la charla por la que traicioné al amigo Bonilla :D

También asistí a las charlas de:

Daniel de la Mata @danimataonrails, jQuery mobile for dummies. Muy introductoria y con problemas para leer las slides, pero buenos consejos y problemas, de una empresa que utilizó esta tecnología en producción. Aquí el enlace a los ejemplos y slides.

Julien Castelain @__juju__ y Denis Ciccale @tdecs, Single Page Application con Backbone. Otra buena charla técnica introductoria, cubriendo muchos aspectos del desarrollo de aplicaciones con esta tecnología. No conocía Medianet software, pero parece un muy buen ejemplo de empresa en la que da gusto trabajar.

Javier Cerviño, Introducción a WebRTC. Muy buena charla, esta tecnología es muy interesante, permitirá realizar vídeo-conferencias a través del navegador sin necesidad de plugins y mucho más. Estoy trabajando actualmente en un proyecto que incluirá vídeo-conferencia y me interesaba especialmente. Lamentablemente no es algo que podamos implementar a corto plazo, pero Javier es un experto que lleva mucho tiempo trabajando en el tema y sus conocimientos me han sido de gran utilidad.

Y por último, el plato especial del evento al menos en mi opinión.

Codemotion 2012 - Madrid

Aitor García Rey, @_aitor, Tremors, Earthquakes & Tectonic Shifts. Toda mi admiración y respeto para Aitor, gracias por una charla profunda, sesuda, bien intencionada, propia de alguien que observa el mundo e intenta comprenderlo para intentar mejorarlo. Está muy bien hacer cosas, y está muy trillado la importancia de hacerlas, pero está aún mejor haber pensado en qué invertir esa capacidad de hacer que tenemos. Sus slides estarán pronto y el vídeo espero que también.

Codemotion 2012 - MadridGracias a la organización que permitió reunir a 1000 personas, conectar gente y aprender.

Se echó en falta al Comando Muyayo, pero no importa porque los veremos en Zaragoza, en el próximo Agile Open Spain. ;D

Las fotos y alguna más en mi Flickr.

Comentarios: 4

Formularios web: ¿Es “repetir contraseña” un campo obsoleto?

17 enero, 2012
507097_28287093

¿Sigue siendo necesario o no el campo “repetir contraseña” en un formulario de alta de usuario?
En una de nuestras últimas reuniones sobre un proyecto en el que estamos trabajando con mis compañeros de sonic, surgió esta pregunta.

(más…)

Comentarios: 6

LESS: css inteligente que mejora tu productividad

15 diciembre, 2011
LESS

Hace ya tiempo que CSS dejó de ser sólo una forma de agregar algunos estilos básicos en una página web. Hoy ha evolucionado hasta ser una poderosa herramienta para definir no sólo estilos mucho más complejos, sino también para controlar el comportamiento y estructura del layout de nuestro sitio web en todo tipo de dispositivos. Sin embargo, si trabajas en proyectos medianos a grandes, su uso y mantenimiento a veces puede volverse complejo, poco flexible y repetitivo .

Es por esto que se crearon alternativas que complementan al CSS como LESS y SASS que, en resumen, te permiten escribir el CSS que usas todo los días pero con la posibilidad de utilizar variables, funciones y métodos para que tus hojas de estilo funcionen de manera mas inteligente y mejoren tu productividad.
Nativamente ningún navegador soporta éstos formatos claro, es por eso que debes convertirlos a archivos CSS comunes antes de usarlos en producción.

Suena complicado, pero hey, a no asustarse que no es tan difícil como parece, y esto créeme puede aliviar MUCHO tu trabajo diario.

¿Que puedo hacer con LESS?
Mejor que explicar será mostrarte algunos ejemplos rápidos que te permitirá entender su poder, ya que lo que se puede hacer es mucho más de lo que puedo cubrir en este post.

Variables:

En vez de manualmente agregar por ejemplo el color a cada elemento que lo requiera, puedes definir una variable y asignarle un color, luego aplicar la misma a cada elemento que lo necesite (y modificarla en otra regla), si mas tarde necesitas cambiar el color de todo el sitio, sólo debes modificar la variable inicial. ¿No es genial ?

//Definimos una variable para un color
@azul-base: #5B83AD;
//Esta otra variable oscurece el color de la variable anterior en un 20%
@azul-claro: darken(@azul-base, 20);
//Aplicamos la variable al div "header" y la segunda a sus links
#header { color: @azul-base; }
#header a {color:@azul-claro;}
//Resultado CSS
#header {color: #6c94be;}
#header a {color: #36506c;}

Mixins:
Permite agrupar varias lineas CSS de una misma regla y usarla dentro de otras, por ejemplo:

//Definimos un Mixin
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
//Lo usamos dentro de otros elementos
#menu a { color: #111; .bordered; }
.post a { color: red; .bordered; }

//Resultado CSS
#menu a {#111 border-top: dotted 1px black; border-bottom: solid 2px black;}
.post a {color: red; border-top dotted 1px black; border-bottom:solid 2px black;}

Otro ejemplo clásico de Mixins es para aplicar efectos de css3 como border-radius, box-shadow, etc que requieren muchas líneas de prefijos de distintos navegadores para garantizar compatibilidad. Con LESS los podemos definir una vez y reutilizarlos infinitamente, además puedes usar los llamados “Mixins paramétricos“, donde pasas valores al mismo dinámicamente como si fuese una función de javascript.

// Mixin de border-radius
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

// Lo implementamos en esta regla y le pasamos el valor dinámicamente
.button {
.border-radius(5px);
}

Puedes ver más ejemplos haciendo click aquí

SASS vs LESS

Comentaba al principio que existe también SASS…¿Cual elegir?, bueno no hay un “vs” realmente en cuanto a potencia, ambos comparten muchas características y casi podría decirse que si sabes usar LESS, sabes usar SASS y viceversa.  ¿Cual es su principal diferencia entonces?
La manera en que son procesados, LESS es una librería basada en javascript, por ende se procesa del lado del cliente (el navegador) para producir el CSS regular que el navegador utiliza, en cambio SASS corre bajo Ruby y se compila del lado del intérprete antes de ser enviado al navegador.
A muchos puede no gustarles los segundos extra que se requiere para que el motor de javascript del navegador procese LESS y lo convierta en CSS común, pero hay alternativas para evitar esto que explicaré luego.
Por otra parte SASS al compilarse por un intérprete Ruby necesitas tener instalado uno para utilizarlo (o algún derivado como Rails), por lo que si no usas ese lenguaje no podrás usar SASS, a menos que tengas una Mac que viene con Ruby de fabrica (sudo gem install sass), por lo que muy probablemente sea mas sencillo si usas pc inclinarte por LESS.

LESS primeros pasos:

¿Cómo lo instalas? Hay dos formas básicamente, o lo procesas “al vuelo” en el navegador o lo puedes compilar antes de subir los archivos a tu sitio (Recomendado)

Usando LESS  (compilando en el navegador)

  • Descarga LESS de la página oficial: http://lesscss.org
  • Enlaza tus hojas de estilo .less con el valor “rel” a “stylesheet/less”.
     link rel="stylesheet/less" type="text/css" href="styles.less"
  • Incluye el script:
    <script type="text/javascript" src="less.js"></script>

    (Asegúrate de incluir las hojas de estilo antes del script)

Personalmente prefiero utilizar el próximo método, para ésto se requiere compilar los archivos LESS a CSS antes de utilizarlos en el sitio web, ésto hace WinLess.

Este programa, gratuito, lo hace casi todo solo. Una vez que instalas el programa y lo abres, debes seleccionar en qué carpeta de tu proyecto estarán tus archivos con extensión .less y voila!…WinLess compilará todos los archivos a CSS cada vez que los modifiques en tu editor html automáticamente, lo cual tiene la ventaja que no tienes que cambiar la forma en que enlazas a tus hojas de estilo en el header, ya que usas los archivos compilados con extensión .css como de costumbre.

Usando LESS (compilado previo a producción)

  • Descarga WinLess: http://winless.org/
  • Agrega tu carpeta con archivos LESS al programa
  • Listo, enlaza los archivos compilados CSS como de costumbre al header de tu página

Mas información:

Less: http://lesscss.org

Sass: http://sass-lang.com

WinLess: http://winless.org

Espero te haya sido de utilidad este post y cualquier consulta no dudes dejar tu pregunta en este mensaje. Hasta la próxima !

Comentarios: 6

Ruby on Rails: cómo instalar entorno de desarrollo

21 noviembre, 2011
Ruby on Rails instalación

Este miércoles dare uno de los famosos talleres de Cachirulo Valley sobre Ruby on rails, no olvides pillar tu entrada.
Para poder pasar directamente a la acción en el taller, os he preparado este pequeño post sobre la instalación del entorno de desarrollo, esto es:

  • Git
  • Ruby
  • Rubygems
  • Rails

Instalar Git:

Para trabajar con Ruby on Rails, el sistema de control de versiones Git, podría decirse que no es opcional, te lo encontrarás en diferentes situaciones, por lo tanto, es importante que lo tengas instalado desde un comienzo. Para comprobar si ya lo tienes instalado y su versión, en un terminal (consola), introduce la primera línea y deberías obtener la segunda o algo parecido:

$ git --version
git version 1.7.7.4

Si no fuera así, sigue las instrucciones de la version online del libro Pro Git (cap. 1-4) para instalar en Linux, Mac o Windows.

A continuación nos dividimos, primero explicaré la instalación para Linux o Mac y al final la de Windows, que es mucho más fácil (sí has leído bien).

Instalar Ruby en Linux o Mac

Como con Git, primero comprobaremos si ya tienes instalado Ruby introduciendo en el terminal:

$ ruby -v
ruby 1.9.2

Si no tuvieras instalado Ruby, las versiones más recomendables para instalar son 1.8.7 o 1.9.2, puedes instalar más de una versión a traves de una excelente herramienta llamada RVM (Ruby Version Manager) que además permite tener distintas librerías, llamadas gems y agruparlas por ejemplo, por proyectos para mantener el entorno ligero y ordenado. No es obligatorio para el taller pero lo recomiendo totalmente.

# Para su instalación requiere curl, por eso comprueba:
$ curl --version
curl 7.23.1

# Si no tienes curl descarga el tar http://curl.haxx.se/download.html
$ tar zxf curl-7.23.1.tar.gz
$ cd curl-7.23.1
$ make && make install

# Ahora instalas RVM http://beginrescueend.com/rvm/install/
$ bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer)
# Y agrega RVM a tu .bash_profile
$ echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile
# Comprueba si se ha instalado correctamente
$ type rvm | head -1
rvm is a function # YEAY! :D si no obtienes esto, consulta el sitio RVM

Ahora instalar cualquier version de Ruby es tan fácil como

$ rvm install 1.9.2

En caso de que no queráis instalar RVM, la instalación directa de Ruby para distintos sistemas operativos podéis encontrarla en el sitio web de Ruby.

Instalar Rubygems

Si has seguido mi consejo, y has instalado RVM, ya tienes Rubygems. Si no las instrucciones las tienes en el sitio web de Rubygems. RubyGems es un gestor de paquetes de Ruby y se usa para distribuir todo tipo de programas y librerías, como por ejemplo Ruby on Rails.

Instalar Ruby on Rails

Muy simple:

# Si has instalado RVM
$ gem install rails # si quieres una version concreta: --version 3.1.0
# Si has ido por otro camino ;)
$ sudo gem install rails
# Comprueba la instalación:
$ rails -v
Rails 3.1.0


Instalación del entorno en Windows


La instalación en Windows es de broma, gracias al trabajo de Rubyinstaller y ejecutarlo.

Espero que podáis instalar el entorno sin dificultades y nos vemos el miércoles en el Digital Water Pavilion (mapa) gracias a la gente de Milla Digital.

Comentarios: 7
Tags: