2012/09/24

Resolviendo Soporte Drag para Flexslider

Es posible usar el plugin jquery.event.drag para proveer soporte para drag a Flexslider (es decir que permita arrastrar los sliders con el ratón en el desktop, de modo similar a como permite hacerlo en un dispositivo tipo touch):

- Usando el plugin jquery.event.drag (http://threedubmedia.com/code/event/drag/)
- En jquery.flexslider.js, copio el bloque que da soporte a mousewheel y lo uso como base para el soporte para drag:
...
// MOUSEWHEEL:
if (vars.mousewheel) {
  slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
    event.preventDefault();
    var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
    slider.flexAnimate(target, vars.pauseOnAction);
  });
}
// DRAG:
if (vars.drag) {
  slider.bind('drag', function(event, delta) {
    event.preventDefault();
    var target = (delta.deltaX < 0) ? slider.getTarget('next') : slider.getTarget('prev');
    slider.flexAnimate(target, vars.pauseOnAction);
  });
}
...

- También agrego 'drag' en los defaults de flexslider:
...
$.flexslider.defaults = {
  ...
  mousewheel: false,
  drag: false,
...

- Entonces, en el script, se puede usar 'drag: true' cuando se requiera:

$('.flexslider').flexslider({
  animation: 'slide',
  slideshow: false,
  drag: true
});

Referencia:  Request: add mouse dragging for desktop users

2012/07/05

L Button

¿Es posible hacer hover de un botón con forma que no sea rectangular (por ejemplo, con forma de L)?

Aquí un ensayo de la idea: http://jsfiddle.net/rulokc/evbhg/

2012/05/28

Publicar página web en GitHub

Es posible usar GitHub para publicar una página web estática.

Por ejemplo, para un portafolio. A continuación, como empezar con el index.html.

  • Siendo usuario de GitHub, crear el repositorio portafolio. Elegir que cree el README.
  • Clonar el repositorio: git clone git@github.com:myusername/portafolio.git
  • Crear el branch gh-pages: git checkout -b gh-pages
  • Crear index.html y agregarlo: git add .
  • Commit: git commit -am "created index.html"
  • Push: git push origin gh-pages
  • Revisar http://myusername.github.com/portafolio/

2012/05/25

Vertical Site

Introducción
La motivación fue hacer un site similar a:
Revisando believein (pude bajar el site usando wget, Firebug y un poco de paciencia), me resultaba un poco difícil encontrar la clave del comportamiento que veía.

Encontré una aproximación en Curtain.js. Sin embargo, cuando requería modificar la presentación, también me resultaba un poco difícil encontrar dónde hacerla.

Decidí reinventar la rueda de este caso, para tratar de comprender las ideas del proceso de solución.

Los sites que revisé me dieron pistas.

En este tutorial trato de resumir el proceso.

vertical-site@github

Simple HTML
  • Todo el contenido está presente en el mismo documento.
  • El contenido se divide en secciones a las que denomino pages.
  • Cada page es el destino de un link del menú. Esto permite una navegación simple a enlaces internos.
Aplicando estilos básicos:

index.html
style.css

Nav fixed
  • Se fijan los elementos de navegación: cabecera y menú.
    En simple_html, estaban dentro de page-0 (para permitir ver el menú cuando se fuera a HOME). Como ahora serán siempre visibles, eso no es necesario.
  • Se implementa un indicador de posición, que señale en el menú la página activa.
    • En el menú, aparece resaltado el link a.active
    • El link se activa si el url cambia
    • El url cambia
      • cuando se ingresa a mano
      • cuando se hace click en un enlace del menú
      • cuando se hace scroll
    • El plugin address permite responder ante un cambio del url.
index.html
style.css
script.js

Scrollto
  • Scroll animado suave.

index.html
style.css
script.js

(continuará...)

2012/05/17

Galaxy Young GT S5360L como root y Link2SD

Usando el celular Galaxy Young (GT S5360L), es posible rootearlo (usarlo como root o superusuario) siguiendo procedimientos como:
En ambos casos se describe una solución que consiste en:
  1. Conseguir un archivo de actualización. Por ejemplo:
  2. Colocar el archivo de actualización en el raíz del SD. Para esto se puede usar Kies 2.
  3. Reiniciar el celular en modo recovery. Esto se consigue pulsando simultáneamente los botones de volumen, apagado y home durante 4 segundos aproximadamente.
    En el modo recovery, aparece texto monoespaciado, de color rojo sobre fondo oscuro. Usar las teclas de volumen para navegar por las opciones de menú. Usar la tecla home para elegir una opción.
  4. Elegir 'apply update from sdcard'. Elegir el archivo subido en el paso 2. Se hará el proceso de rooting.
  5. Elegir 'reboot system now'.
  6. Luego de esto, al entrar a Aplicaciones, aparecerá la nueva aplicación SuperSU.
Una vez que se es root, cuando una aplicación requiera acceso de root aparecerá una solicitud. Elegir Grant para permitir el acceso.

El rooteo puede ser útil para usar programas como link2sd, que permiten usar el sd para almacenar más aplicaciones de lo que normalmente es posible.

Para usar link2sd, hay que particionar el sd. Para eso se puede usar MiniTool Partition Wizard, siguiendo un procedimiento como el descrito en:
Otra referencia útil es Increase Internal memory by Link2Sd Tutorial, que hace la partición de otro modo.

MiniTool Partition Wizard permite hacer el particionado usando la PC y sin eliminar los datos que hubiera (y que dejen suficiente espacio libre para la nueva partición). Definida la partición secundaria (primary, ext3), es necesario reiniciar el celular, ejecutar link2sd para que reconozca la segunda partición y luego reiniciar otra vez.

Otros programas útiles en modo root: 15 Aplicaciones Imprescindibles para un usuario root

2012/05/15

El poder de la gente


Hay una idea en Internet que me parece notable. Lograr que la gente lo pueda hacer por nosotros, voluntariamente. Una red social seria sostenible si logra que sus usuarios la construyan. Y seria un negocio para el intermediario que facilitara el proceso.

En Facebook, la gente sube la información que aumenta el valor de esa red social. Facebook permite a la gente a compartir su información y, al hacerlo, la gente potencia a Facebook.

En el juego Draw Something, de OMGP, es la gente la que provee a sus amigos el acertijo -en forma de dibujo-, que deben adivinar. Draw Something permite crear los acertijos y, al hacerlo, la gente hace funcionar Draw Something.

La gente puede subir a la red videos, fotografías, opiniones sobre cosas que les parecen interesantes, que le asombran, que le indignan, por las que piensan se puede hacer algo, para compartirlo. Y, al hacerlo, ¿qué estamos haciendo funcionar?

Un amigo me comenta de un video donde aparece un tipo que no quiso ceder el asiento preferencial en el bus. Puesto en la red, ha recibido condena casi unánime. Incluso aparece en el sitio web de un diario local. No es necesario un controlador si nosotros mismos podemos proveer ese servicio.

En "1984", la obra de Orwell, el Gran Hermano requería de grandes recursos y todo un sistema policial para lograr que las cosas funcionaran como quería. Pero no es necesario. Hoy, la gente puede hacer funcionar al Gran Hermano, casi sin darse cuenta.

2012/03/14

Escribiendo aplicaciones para Facebook


Escribiendo aplicaciones para Facebook
A pesar de la documentación que hay en https://developers.facebook.com/docs/, necesitaba algo que me diera una perspectiva en el tema. Leyendo un poco en otras fuentes, fui entendiendo la idea.

La idea
¿Qué es una aplicación para Facebook? Imaginaba que sería algo como un programa, construido con un framework, en un cierto lenguaje y con cierto esquema, que Facebook ejecutaba para los usuarios que lo hubieran jalado de la galería de aplicaciones.

Pero no es así. Se trata de aplicaciones web escritas en el lenguaje y esquema que uno prefiera, corriendo en el hosting que uno prefiera y que uno puede asociar con Facebook siguiendo ciertos esquemas.

En el esquema Website, la aplicación tiene su propio url, como de costumbre. El usuario accede y la aplicación puede hacer internamente invocaciones a los servicios de Facebook antes de mostrar un resultado al usuario.

En el esquema Application, la aplicación tiene su propio url, como de costumbre, pero Facebook actúa como proxy, asignándole a la aplicación un url bajo su dominio. El usuario accede al url dentro de Facebook, Facebook pasa los requerimientos al url externo de la aplicación, la aplicación puede hacer internamente invocaciones a los servicios de Facebook antes de devolver un resultado, Facebook recibe ese resultado y lo publica en un iframe.

Referencias
  • "Facebook Application Development, For Dummies"
    Jesse Stay, 2011
    ISBN: 978-0-470-76873-0

2012/02/27

Interfaz textual alternativa

Una de las formas más rápidas de ingresar información es usando un editor de texto. Puede ser una expresión constante, es decir el propio texto que se requiere, o también una expresión variable, es decir un texto que genera el texto que se requiere (algo así como un programa).

Siendo una de las maneras más rápidas, me parece que sería bueno considerarla siempre como opción en cualquier interfaz. Generalmente las interfaces sólo proveen medios de señalar y hacer click, completar algunos campos, pero eso no siempre permite toda la agilidad que uno desearía. Quizás sería buena idea que SIEMPRE hubiera la forma de ingresar directamente, como un flujo de texto simple, aquella información que el programa requiere (y la interfaz GUI nos ayuda a ingresar). Además, si hay la opción de macros, condicionales, alguna forma de programación, temporización, comunicación con otros módulos, etc. se podrían hacer cosas interesantes.

2012/02/23

Sigil para crear epub

Epub es un formato abierto para libros electrónicos.

Me estoy aficionando a leer epubs en el celular. Me gusta el hecho de que el contenido se adapte al tamaño de la pantalla. Me hacía recordar al HTML, así que me preguntaba cómo es que se haría un epub.

Si pruebas cambiar la extensión de un archivo epub a zip y pruebas abrirlo, verás que se puede. Un epub contiene, comprimido en un zip, una estructura de archivos tipo web, principalmente XHTML, que constituyen el libro.

De modo parecido a hacer páginas web, es posible hacer un epub completamente a mano. Sin embargo, la estructura del epub es un poco más complicada. Resulta más práctico iniciar sobre un template o usar algún programa de edición WYSIWYG, como Sigil.

Lo he probado para hacer un libro simple. Me sirvió de bastante ayuda este tutorial. Aunque es para una versión anterior y el menú ha cambiado un poco.

2012/02/22

Hola Sublime Text 2!

Sublime Text 2 es un nuevo editor de texto que estoy probando.

Mi editor de textos favorito es Notepad++. Antes lo fue jEdit. Pero, cuando jEdit me empezó a parecer demasiado pesado, encontré en npp una buena alternativa. Iniciaba mucho más rápido, también coloreaba la sintaxis, también tenía tabs... además empecé a pasar la mayor parte del tiempo en Windows, así que comencé a usarlo cada vez más. Mucho más con el cómodo manejo de encodings (más que en cualquier otro editor que haya visto), el plugin para FTP y con el soporte para Zencoding.

Hace unos días, de pronto, descubrí Sublime Text 2. Lo recomendaban en unos video tutoriales sobre jQuery en net.tuts.com. Y me está pareciendo interesante. Aún me está costando un poco acostumbrarme a las nuevas secuencias de teclas pero me gusta mucho lo de los cursores múltiples, las selecciones rectangulares, las selecciones múltiples, la forma en que maneja la configuración. No es open source pero tiene una arquitectura extensible. No es gratis pero uno puede probarlo indefinidamente... sólo hay que cerrar el recordatorio de compra de vez en cuando.

Tengo ciertos hábitos al editar texto, así que aquí resumo lo que voy haciendo mientras aprendo cómo hacerlo en ST2.

Preferencias Generales
Por ejemplo, para fonts, me gusta usar algo similar a Lucida Typewriter, o DejaVu Sans Mono, a 14pt. También los tabs reemplazados por 2 espacios.
No encuentro un menú para eso. Pero se resuelve entrando a Preferences, Settings-User y agregando ahí los items de configuración que uno quiera. Una referencia a los valores que se puede poner se puede ver entrando a Preferences, Settings-Default:

{
  "font_face": "DejaVu Sans Mono",
  "font_size": 14,
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}

Zencoding
Si uno hace una secuencia tipo zencoding seguida de un tab, se expande. Sin embargo, quisiera expansiones de documento un poco más completas (html:4s, por ejemplo). Así que buscando encuentro que para instalar Zencoding hay que instalar primero el Sublime Package Control.

Para eso no hay que bajar manualmente ningún archivo, sino ejecutar en la consola de ST2 (se abre con CTRL+` o entrando a View, Show Console), lo siguiente:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Luego de eso, reinicio ST2. Luego, entro a Tools, Command Pallete, Package Control::Install Package y elijo Zencoding en la lista de paquetes. Reinicio ST2 nuevamente. Pruebo crear un documento html, escribo html:4s, TAB, funciona :-D

Para una guía rápida de cómo usar Zencoding en ST2, se puede revisar http://code.google.com/p/zen-coding/wiki/SublimeTextZenCodingEn

A veces, uno quiere que cierto documento se trate de cierta manera (por ejemplo los .module de Drupal son php). Para indicarlo manualmente, en el menú elegir View, Syntax y elegir el tipo.

Update

El package Zencoding cambio de nombre a Emmet.

2012/01/20

En el Dojo

Hoy asistí a un dojo de programación. Me ha parecido una experiencia muy enriquecedora.

Un dojo de programación trata de seguir la idea de un dojo de artes marciales en cuanto a formar un ambiente donde podamos ejercitarnos fuera de la contienda real (que viene a ser el día a día con los proyectos que desarrollamos).

La práctica se trató esta vez de usar TDD y una especie de Pair Programming para resolver el problema de convertir números arábigos, los que usamos normalmente, a la notación romana.

TDD son las iniciales de Test Driven Development, Desarrollo Guiado por Pruebas. Pablo Tortorella, quien nos guiaba, dijo que le parecía mejor pensar en Desarrollo Guiado por Ejemplos, ya que una prueba es en realidad un caso particular que ponemos como ejemplo para que el programa que hacemos lo intente resolver. Un ambiente de pruebas toma la prueba y la lleva a cabo a ver si el programa la pasa. Entonces, en TDD: 1) definimos una prueba simple 2) corremos la prueba (incluso sin tener ningún programa; es importante ver que falla) 3) se enfoca uno en implementar en el programa lo mínimo necesario hasta lograr pasar la prueba 4) si se nota que algo puede refactorizarse (simplificar, eliminar duplicaciones o dependencias innecesarias), hacerlo, luego pasar al paso 1) e ir repitiendo el ciclo, con pasitos de bebe, dejando que el programa evolucione hasta el nivel que deseemos.

Para alguien habituado a programar al estilo tradicional, donde se pretende resolver todo el problema en la fase de diseño, antes incluso de empezar a programar, puede costar un poco enfocarse en pequeños pasos y no intentar codificar toda la solución de una vez. Pero el estilo tradicional realmente tiene problemas. Precisamente en respuesta a esos problemas surgieron cosas como la eXtreme Programming, TDD y Agile.

En el caso del problema de la conversión a números romanos, probablemente uno imagine ahora, sin necesidad de programar, una manera de resolver el problema y podría programarla en un rato. Pero, deténgase y trate de hacerlo en pequeños pasos, ideando una prueba simple y trivial cada vez, para ver a dónde va conduciendo.

Con el dojo me di cuenta que, conforme avanzan las iteraciones, van apareciendo patrones que van sugiriendo la solución. El tiempo de la práctica se acabó, pero creo que eventualmente llegaríamos a solucionar el problema.

Camino de regreso, recordaba la forma en que el código iba proponiéndose y refactorizándose. Había cierto algoritmo en eso. Me pregunto si sería posible programar a una computadora para que halle esa solución evolutiva usando TDD. Quizás sí. Entonces, me pregunto si sería posible que una computadora, o un conjunto de computadoras, realizando pequeños pasos de bebe, resolviendo casos triviales, puedan resolver cualquier tipo de problema de programación, simplemente por evolución, usando TDD. Me pregunto si será ese el futuro.

Crédito de la imagen: CIO Dojo

2012/01/03

La libertad de llegar al otro lado

Había una vez un barquero que ayudaba a la gente a cruzar de un lado a otro del río.

Antaño hacía mucho frío y eran muy fuertes las corrientes que cruzaban el agua helada. Había que recorrer un camino largo, que pasaba por un monasterio, para llegar a un puente donde se podía cruzar.

El barquero tuvo que traer madera de muy lejos, cuerdas fuertes y brea y hacer varias pruebas antes de lograr una embarcación que lograra cruzar el río en el punto donde la gente más lo necesitaba.

Los primeros viajes fueron para los sacerdotes, que habían visto con recelo la construcción del aparato. Algunos criticaron que no tenia la estabilidad del puente del monasterio y que sería mejor prohibirlo, para proteger a la gente. Pero cruzaban ya los nobles y cada vez más gente, así que decidieron que dejarían al barquero en paz con tal de que les pagara el impuesto correspondiente. La gente le daba sus monedas al barquero y la décima parte de estas llegaba al monasterio. Además, la gente podía pasar sólo las cosas que el monasterio permitía.

Aparecieron otros barqueros para resolver las largas colas que se estaban comenzando a formar, pues un solo barco no bastaba para todos los viajeros que cruzaban por ahí. El monasterio los dejaba prosperar con tal que le pagaran su impuesto.

Un pueblo empezó a formarse en el punto donde cruzaba la gente, para atender a los muchos viajeros que ahora preferían esta ruta.

No era fácil conseguir lo que se necesitaba para hacer un barco ni era fácil conducirlo por aquellas aguas agrestes. Los barqueros, con el tiempo, decidieron que era injusto el impuesto que le pagaban al monasterio y dejaron de dárselo. Como los pasajes bajaron de precio y les permitieron pasar mas cosas que antes, la gente apoyó la decisión.

Los tiempos cambiaron. El río se volvió más amigable. Un día, alguien ideó una manera sencilla de hacerse una canoa y poder cruzar también. No se iba en los asientos de cuero de los barcos, ni servían té y panecillos, pero era suficiente para quienes querían un modo económico de cruzar.

Los barqueros se opusieron al nuevo invento, aduciendo que ponía en peligro a la gente.

Pero, como no pudieron detener a la gente que los seguía usando, decidieron reclamar al Señor de esas tierras, para que este declarara que el río era propiedad natural de los barqueros, del mismo modo que un martillo era propiedad natural de un carpintero, o un rastrillo la propiedad natural de un jardinero. Uno podría seguir usando canoas, siempre y cuando algún barquero le diera permiso de pasar por su parte del río.

Los barqueros se convirtieron en protectores del río. El Señor se convirtió en protector de los barqueros. Y como tal, recibía ahora los impuestos que antes recibiera el monasterio.

Un día un grupo de viajeros decidió plantar altos pilares en cada orilla, llevar cuerdas de un lado a otro y tender un puente colgante. La gente podía cruzar con más fluidez, sin pagar nada y con libertad de llevar cualquier cosa que quisiera.

Los barqueros se escandalizaron y se opusieron firmemente al puente, a pesar de que solucionaba el problema inicial. Qué iba a ser de ellos y su modo de vida. Anunciaron que la prosperidad del pueblo se vería afectada. Clamaron por sus derechos ante el Señor.

Quienes tendieron el puente mostraron que no estaban tocando el río de los barqueros y el Señor tuvo que admitir que tenían razón y la gente podía usar lo que mejor le pareciera. Por un tiempo así fue.

Pero los barqueros insistieron, haciéndole ver al Señor que obtendría menos impuestos. Y, por supuesto, del peligro que representaba el puente para la seguridad del reino, cuando no se podía controlar las cosas que podían pasar de un lado a otro del río.

Un día se anunció que un espía proveniente de un reino enemigo había intentado cruzar el puente con intenciones oscuras. Había sido tan hábil con las armas como lo eran los hombres de la guardia del señor. Pero, por supuesto, era del otro reino porque usaba ese atuendo. Felizmente lo pudieron neutralizar.

Como se demostró que el puente podía ser peligroso, se ordenó controlar no sólo qué cosas podían pasar, sino qué personas tenían el derecho de hacerlo. En cada extremo del puente, la gente se quitaba los zapatos y se los volvía a poner luego que los guardianes del Señor los habían revisado. Por otro lado, en el palacio consideraban invadir al reino que envió al invasor, por el terror que estaba ocasionando.

Un día, el río cambió. El nivel bajó y era posible hallar sendas donde cruzar sin que el agua llegara más arriba de las rodillas. Cualquiera podría ir y venir sin usar barcos o puentes.

Pero los barqueros prohibieron que se hiciera tal cosa. Insistían en que tenían el derecho natural de proteger el río.

Una noche, cansados de que el Señor prefiriera a unos pocos barqueros por encima de todo el pueblo, todos los jóvenes se acercaron a la orilla y esperaron en silencio. Al amanecer, fueron cruzando. Aunque los barqueros vociferaban por sus derechos y se quejaban ante sus padres y los hombres del Señor intentaban detenerlos, no podían.

En el transcurso de la mañana, también sus padres y toda la demás gente se les unió, en una sola fuerza. Porque eran más. Porque eran la razón de que los barcos. Porque eran la razón de los puentes. Porque se dieron cuenta que eran también la razón del Señor.