Archive for the ‘ Programación ’ Category

jQuery Retina display plugin

La pantalla del iphone 4 es revolucionaria ya que es el primer dispositivo mobil que utiliza una densidad de pixeles superior a cualquier otra. Es gracias a ésto que la lectura es mucho más fina.

Ahora el problema es que en general cuando uno crea gráficos para pantallas, especialmente para la web lo hace en 72 dpi cuando los nuevos gráficos para retina debieran ser en 326.

Otro problema es que todavía hay dispositivos sin la nueva pantalla retina, lo que se traslada a que necesitamos duplicar la cantidad de gráficos: los comunes y los de mayor densidad de pixeles. Aún más necesitamos una manera de decidir cual mostrar, osea detectar que es un dispositivo con retina y mostrar los gráficos correspondientes de lo contrario seguir usando los gráficos comunes.

Con éste problema en mente encontré un plugin de jQuery que soluciona éste problema. Su implementación es súper sencilla.

<script src="js/jquery.retina.js" type="text/javascript"></script> 
<script type="text/javascript">  
     $(document).ready(function() { 
          $('img').retina(); 
     }); 
</script>
más información:

http://troymcilvena.com/post/998277515/jquery-retina

Columnas con jQuery

Si jQuery se está tomando la cotidianidad que tenía actionscript en mi día a día. La verdad que me sorprende lo rápido que se pueden lograr cosas. Ayer nombré como hacer un formulario totalmente usando jQuery en vez de HMTL. Hoy necesitaba hacer una pagina con varias columnas. Comunmente haria las divisiones corresponientes, les daria un ancho, un padding, magen y disrtribuiria el contenido entre ellas. El problema surge cuando el contenido es variable y nos es dificl distriburi el contenido de forma eficaz. Es por ésto que recurrí a jQuery, y sinceramente no tardé más de 3 minutos en implementarlo, estoy seguro que si lo hubiese hecho de la forma tracicional me hubiese llevado al menso 15 entre hacer el html y ajustar el css. Hay varios “plugins” que hacen esto que que usé yo y funcionó a la perfección pueden encontrarlo en: http://codeasily.com/jquery/multi-column-list-with-jquery

La idea de este post es de notar que hay varias respuesta para el mismo problema y no siempre la típica, usual o común es la más acertada en cuanto a productividad. Hay que estar atentos si ven en la web formas más eficaces de hacer las cosas. si quieren recomendar algo que hayan visto mandenos un mail o dejen un comentario y lo publicamos

Formularios hecho 100% con jQuery

La verdad que hacer formularios siempre es una tarea que conlleva mucho tiempo, sobre todo cuando tenemos que asegurarnos que se vea perfectamente en todos los navegadores, que sea usable y que contenga una forma amigable de validación. Hace tiempo que estoy buscando un método para automatizar y hacer la tarea más fácil. La verdad que hay varios framworks y cada uno tiene lo suyo, pero no queria hacer un post sobre todos lo frameworks disponible sino más bien destacar uno que me funcionó muy bien, que es muy facil de implementar y como novedad está hecho 100% con jQuery. Lo único que le faltaría para ser perfecto es que venga con soporte en varios lenguajes. Igualmente esta muy bien y la validación es buena. Pruebenlo y comentenme que les parece.

Fomation: http://mattnull.com/formation

PHP for Android

No me voy a explayar mucho porque el titulo lo dice todo. phpforAndroid es una seria de librerias/framework que te permite desarrollar aplicaciones para Android usando PHP. Está bastante bueno porque las salidas las hace usando la GUI de Android. Vean el video que demuestra bien de lo que estoy hablando. Espero que sigan evolucionando estas tecnologías y que en el futuro podamos acceder a la brujula, al gps, la camará,etc.

Generador de botones CSS

Este link proviene de un tweet pero me pareció útil, simpre tengo problemas cuando quiero implementar botones simples en algún sitio. Utilizando éste generador se puede crear botones sólo utilizando CSS. el generador es visual, donde eliges los colores, la tipografias,etc y te devuelve el css listo para impletar.

El CSS es algo como lo siguiente:

.button { border-top: 1px solid #96d1f8; background: #d66565; background: -webkit-gradient(linear, left top, left bottom, from(#7d3e9c), to(#d66565)); background: -moz-linear-gradient(top, #7d3e9c, #d66565); padding: 8.5px 17px; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #cdf227; font-size: 13px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .button:hover { border-top-color: #28597a; background: #28597a; color: #c400c4; } .button:active { border-top-color: #030303; background: #030303; }

acá dejo el link: http://css-tricks.com/examples/ButtonMaker/#