Blog de sonicbyte
Hablamos sobre nuestras experiencias e ideas en diseño y desarrollo web.
Formularios web: ¿Es “repetir contraseña” un campo obsoleto?
¿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.
LESS: css inteligente que mejora tu productividad
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 ?
@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:
.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.
.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:
(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 !
Ruby on Rails: cómo instalar entorno de desarrollo
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 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 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.
$ 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
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:
$ 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.
Formulario por pasos usando Mootools
En nuestro último proyecto e-commerce para el proceso de finalización de compra optamos por utilizar un formulario por pasos. Esta decisión fue tomada para no cansar al visitante con extensos e interminables formularios con un sinfín de campos que no alientan a ser rellenados. Además la interfaz queda bonita y el efecto al ir rellenando los pasos también es agradable para el visitante.
Pero una de las mayores ventajas es que la validación del formulario se realiza en cada etapa, por lo que el visitante puede corregir algún campo mal ingresado sin tener que esperar a rellenar todos los pasos. Esto le da una agilidad al proceso y genera confianza en el visitante.
Para la validación del formulario, en realidad cada etapa es un formulario en si, utilizamos el FormCheck de la librería MooFloor. Éste validador se ha convertido en nuestro favorito a lo largo de los proyectos. Esta librería requiere el core de Mootools 1.2.4 y del more 1.2.4.4 sólo la clase Fx.Scroll. También incluímos un archivo con las frases del validador en castellano salvo que se quiera que aparezcan los avisos en inglés, el idioma default. Es necesario incluir un archivo CSS para mostrar correctamente los avisos del validador. Este archivo se descarga junto con el plugin javascript en la misma página. Por lo tanto la inclusión de archivos para que funcione nuestro formulario por pasos de momento queda de la siguiente manera:
<script type="text/javascript" src="js/mootools-1.2.5.1-more.js"></script>
<script type="text/javascript" src="js/formcheck/lang/es.js"></script>
<script type="text/javascript" src="js/formcheck/formcheck.js"></script>
Para el efecto de transición entre los pasos utilizamos el plugin SlideShow de Ryan Florence. Un plugin para hacer carruseles bastante fácil de implementar y muy extendible. La clase requiere del core de Mootools y la clase Fx.Elements del more, también la clase Loop que se descarga en el mismo sitio del SlideShow. Por lo tanto dos nuevas línea se agrega a la inclusión de archivos:
<script type="text/javascript" src="ruta-archivos-js/slideshow/SlideShow.js"></script>
El siguiente paso es crear las estructura del formulario. Para ello creamos un DIV contenedor que va a contener a las distintas etapas. Cada etapa va a ser un FORM que a su vez va a estar contenido en un DIV. Quedando una estructura así:
<div id="etapa_1">
<form id="form_1" action="#">
....
</form>
</div>
<div id="etapa_2">
<form id="form_2" action="#">
....
</form>
</div>
.
.
<div id="etapa_n">
<form id="form_n" action="#">
....
</form>
</div>
</div>
En esta entrada no explicaremos como validar los distintos tipos de campos, para ello pueden visitar los documentos de la librería MooFloor.
El siguiente paso es instanciar un validador para cada paso, por lo que cada formulario tendrá su propia instancia del validador. Las opciones de la clase deberán ser cambiadas un poco a las de una validación tradicional ya que no queremos que se envíe el formulario, sino pasar al siguiente paso.
Por lo tanto las instancias del validador tendrán la siguiente forma:
submit: false
});
new FormCheck('form_2', {
submit: false
});
Al instanciar de este modo cada validador el formulario no es enviado pero sí le realiza el chequeo para comprobar que cada campo es correcto.
El siguiente paso es el de darle el efecto de transición para pasar al siguiente formulario cuando el chequeo es válido. Para ello debemos primero instanciar la clase SlideShow y luego decirle que hacer a cada formulario cuando el chequeo es válido:
new FormCheck('form_1', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_2'), {
transition: 'pushLeft'
});
}
});
new FormCheck('form_2', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_3'), {
transition: 'pushLeft'
});
}
});
Instanciamos todos los pasos del formulario hasta llegar al último, en nuestro ejemplo el formulario ‘n’. Al validar el formulario ‘n’ se deben enviar todos los datos de los distintos pasos/formularios, para nuestro ejemplo los enviaremos mediante una llamada ajax. Recogemos la información de los distintos pasos para enviarlo como parámetro DATA en la llamada:
new FormCheck('form_1', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_2'), {
transition: 'pushLeft'
});
}
});
new FormCheck('form_2', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_3'), {
transition: 'pushLeft'
});
}
});
..
new FormCheck('form_n', {
submit: false,
onValidateSuccess: function () {
var datos = $('form_1').toQueryString() + '&' + $('form_2').toQueryString() + '&'...'&' + $('form_n').toQueryString();
new Request({
url: 'url_de_la_accion',
data: datos,
onSuccess: function (result) {
// acción resultado de el envío
}
}).send();
}
});
Puedes ver todo el código en github.
Espero que les guste el post. Hasta la próxima.
Formularios Html5: Guía rápida
Una de las características más importantes que nos brinda el nuevo standard Html5 son las mejoras y nuevos elementos disponibles para el manejo de formularios.
La nueva especificación de HTML es soportada de diferente manera por los distintos navegadores*, no todas sus características se comportan igual. A pesar de esto, ya p̶u̶e̶d̶e̶s̶ debes empezar a usar muchas de las características principales, en seguida verás porqué. (más…)