Nombre del autor:juan

Desactivar el scroll vertical en apps de phonegap

phonegap / Deja un comentario / Por

Al hacer una app con phonegap, nos encontramos con que el scroll horizontal se desactiva fácilmente, ya que phonegap, al tener un webview, este se adapta a nuestro html y si ademas eliminamos la opción de zoom con los scale

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimun-scale=1, user-scale=no" />

Resultará curioso como al probar nuestra aplicación, horizontalmente es estática, pero cuando deslizamos el dedo de arriba hacia abaja, vemos un efecto cuanto menos curioso y es que se desliza como si fuera una página web normal y corriente, es decir, nos aplica un scroll vertical como el navegador. Os pongo una imagen para que veáis lo que digo:

Esto es muy fácil de arreglar. Tan solo tenemos que irnos a nuestro proyecto de phonegap, concretamente al archivo Cordova.plist, que lo podemos encontrar de 2 formas:

  • Xcode: raíz del proyecto > Resources > Cordova.plist
  • Finder: raíz del proyecto > [Nombre del proyecto] > Cordova.plist

Ahora, dependiendo de si lo editamos desde Xcode o con otro editor veremos algo como lo siguiente:

Tan solo deberemos poner el valor del UIWebViewBounce a NO en Xcode o a false en el xml del plist y asunto arreglado, al intentar hacer scroll vertical, ya no se deslizará fuera de la pantalla.

El porque del estilo Metro y Windows 8, cuando debemos de actualizar nuestro navegador

Humor / 1 comentario / Por

De casualidad y haciendo unas pruebas para una web, di con la clave del por que del diseño que se utiliza en Windows Mobile y en las futuras versiones a partir de Windows 8 en escritorio. Los diseñadores de Redmon, se les ocurrió la idea de copiar un framework de fronted como puede ser bootstrap de twitter, tras pensarlo deliveradamente, decidieron entrar en la web de bootstrap con la versión en ese momento de Internet Explorer.

Aunque en el momento ya estaba Internet Explorer 9, como iba a ser utilizado para Windows 8, decidieron entrar con la versión de Internet Explorer 8 (por eso de hacer el honor al 8) y se encontraron una agradable sorpresa y es que el diseño les encanto. Pero ojo, no penséis si vais corriendo a la web de bootstrap vais a ver lo mismo que ellos vieron, nada mas lejos de la realidad. Lo que verían estos diseñadores eran cajas cuadradas, de colores claros, elegantes y lisos. Nada de degradados, brillos y efectos. Os dejo una captura de como se ve la web en Internet Explorer 8 y os animo a entrar con vuestro navegador favorito, ya sea Chrome, Firefox, Safari, etc.

Ni que decir tiene que es una chorrada de las típicas que se le ocurren a uno cuando lleva demasiadas horas trabajadas y que la interfaz Metro, Windows 8 o ModernUI como la llaman (ya que con Metro tienen un pleito de marcas registradas), es una interfaz que aunque para mi gusto tengo otras preferencias con mas curvas, no es desagradable a la vista (aunque si algo extraña). Por supuesto todo tiene su por que y esta interfaz no es menos.

Espero que por lo hemos os haya sacado una sonrisa.

Video sobre el jQueryIO acerca de buenas practicas con jQuery

Javascript / 1 comentario / Por

El otro día tuve la suerte de estar en el jQueryIO junto a Miguel Angel Alvarez de desarrolloweb.com y Quique Fernández. Hicimos una pequeña charla hablando un poco sobre buenas practicas a la hora de trabajar con jQuery y como mejorar el rendimiento de nuestras aplicaciones web.

Una parte de lo que se habló, esta publicada en la web en algunos artículos como: Guía de buenas prácticas para aumentar el rendimiento de jQuery o Selectores dobles con JQuery, aumentando el rendimiento de JQuery

Os dejo el video de la charla para quien quiera echarle un vistazo y deje sus opiniones:

Introducción a RaphaelJS

Javascript / Deja un comentario / Por

RaphaelJS es una librería de javascript para desarrollar gráficos y animaciones vectoriales en SVG y VML. ¿Qué es SVG? ¿Por qué vamos a utilizar gráficos vectoriales? ¿Para qué utilizar una librería para trabajar con SVG? Todas estas preguntas son las que debemos comprender antes de empezar a trabajar.

Gráficos Vectoriales Escalables o abreviado del ingles SVG (Scalable Vector Graphics) es un estandar propuesto en el año 2001 por el W3C para estandarizar los gráficos vectoriales. Allá por el año 1998, se presentaron 2 propuestas de gráficos vectoriales, por un lado se presento PGML por parte de Adobe, IBM, Netscape (Mozilla y Firefox) y Sun (Java, ahora parte de Oracle). Por otra parte se presento VML que tuvo más éxito por parte de Autodesk (creadores de Autocad), Macromedia (creadores de flash y posteriormente comprado por Adobe) y Microsoft. Normalmente cuando se hacen varias propuestas de este estilo al W3C, se acaba decantando por una en particular, pero en este caso, se optó por el camino del medio y el W3C propuso SVG que no es mas que la mezcla de VML + PGML.

Con SVG se crea un documento XML que puede ser utilizado tanto en un archivo independiente con extension *.SVG como embebido dentro de una página web al ser un XML y puede ser manipulado con javascript. SVG tiene su propio árbol DOM similar al HTML por lo que fácilmente desde javascript podremos capturar eventos, cambiar sus caracteristicas, así como dar estilos desde CSS.

Una vez tenemos la base, podemos entender mejor el papel de RaphaelJS en todo esto. RaphaelJS es una librería que nos promueve de una gran cantidad de objetos y métodos para encapsular los documentos SVG. Esta necesidad vino dada en su dia por los navegadores antiguos que interpretaban VML y los mas modernos que fueron interpretando SVG. RaphaelJS genera los documentos dinámicamente en uno u otro lenguaje, dependiendo de lo que soporte el navegador, siempre dando prioridad al estandar SVG.

Si todos los navegadores actuales soportan SVG ¿Por qué utilizar una librería como RaphaelJS y no SVG nativo? Muy sencillo y es que cuando queremos generar unos gráficos en SVG dinámicamente, con animaciones y demás, necesitamos de un respaldo de utilidades que nos faciliten en todo lo posible el trabajo, ya que el objetivo es ser productivos. Por ejemplo, para quienes conozcan jQuery, todo el mundo sabe hacer un document.getElementById, pero siempre acabamos haciendo $(«#id») porque es más cómodo, ademas de ofrecernos herramientas muy útiles. Con RaphaelJS pasa lo mismo, si queremos generar una animación en SVG, nos ofrece funciones con calbacks para generar animaciones dinámicamente con varias funciones easing o podemos guardar los objetos de SVG según los vayamos creando para reutilizarlos mas adelante, ademas de ser un poco mas sencillo de utilizar que SVG a pelo.

Este contenido y mas ira apareciendo en el curso de Raphael JS – Gráficos vectoriales con javascript y mas en concreto en el primer capítuo: Introducción a RaphaelJS.

Placeholder en los input con HTML5 y como darles estilo a los placeholder de los input desde css3

HTML5 y CSS3 / 3 comentarios / Por

Una gran mejora enfocada a formularios que trae de la mano HTML5 y CSS3 es el uso de placeholder. Para quien no lo conozca, un placeholder es ese texto que aparece por defecto en un campo de texto y que en el momento que empezamos a escribir desaparece. Se suelen utilizar en formularios con un texto «escriba aquí su nombre» o «su búsqueda», etc. y con el uso de javascript, se ocultaba el texto al empezar  a escribir. Con la aparición de HTML5, los navegadores empezaron a implementar esta nueva funcionalidad.

Utilizar un placeholder no tiene misterios ni secretos y se pueden utilizar tanto para las cajas de texto como las contraseñas, es decir, en input type text e input type password. Para implementar esta nueva mejora, es tan sencillo como añadir un nuevo atributo placeholder al elemento input con el texto que queramos que muestre en pantalla. A continuación os muestro un formulario de login como ejemplo de como se utilizarían estos nuevos atributos:

<form>
  <input class="user" type="text" placeholder="Usuario" />
  <input class="pass" type="password" placeholder="Contraseña" />
  <input type="submit" />
</form>

¿Es sencillo verdad? Ahora vamos a complicarlo un poco, vamos a darle estilos. Todo el mundo sabe como darles estilos a un elemento, en este caso a un input, pero…. ¿Cómo dar estilos a un placeholder? Tan solo hay que utilizar unos selectores de css especiales porque aún no estan soportados oficialmente por los navegadores, así que funcionan a modo de extensiones experimentales, como el moz-border-radius que lleva unos 7 años en modo experimental. En este caso utilizaremos 2 extensiones, una para webkit (chrome, safari, etc) y otra para mozilla (firefox). Las extensiones son: -webkit-input-placeholder y -moz-placeholder. Os pongo un ejemplo:

.user::-webkit-input-placeholder, .user::-moz-placeholder {
  color: blue;
}

.pass::-webkit-input-placeholder, .pass::-moz-placeholder {
  color: red;
}

Ahora tenéis un formulario de login la mar de mono, con los placeholder azules para el usuario y rojo para la contraseña. Espero que os sirva de ayuda para hacer formularios mas bonitos con HTML5.

Twitter Bootstrap el framework frontend the twitter

CSS / 1 comentario / Por

Hoy os quiero hablar de una herramienta web muy útil. Todos conocemos los framework de programación en distintos lenguajes, que si pylons, django, aspnet mvc, etc. Pero ¿Qué pasa con los framework de diseño? En internet podemos encontrar miles de themes gratuitos para utilizar en nuestra página, pero pocos son los que podemos utilizar como base genérica y aquí es donde aparece bootstrap.

Bootstrap es un framework de maquetación web desarrollado por Twitter y que de hecho se utiliza en este servicio, así como en otros muchos como ohloh o masterbranch por poner un par de ejemplos. Desde hace bastante tiempo lo utilizo en mis proyectos personales ya que provee de una buena base de estilos y estructura genéricos.

Bootstrap incorpora:

  • Scaffolding: estilos globales que resetean el tipo de body, enlaces, sistema de grids y layouts.
  • Base CSS: estilos para elementos comunes de html como tipografía, tablas, formularios y botones. Incluye Glyphicons, una librería de iconos libre.
  • Componentes: estilos comunes como tabs, barras de navegación, breadcrumbs, encabezados, etc.
  • Plugins de javascript: componentes comunes de javascript como tooltips, modals, etc.

Lista de componentes:

  • Grupo de botones
  • Botones desplegables
  • Tabs y listas de navegación
  • Barras de navegación
  • Etiquetas
  • Encabezados y destacados
  • Thumbnails
  • Alertas
  • Barras de progreso
  • Modals
  • Desplegables
  • Tooltips
  • Accordion
  • Sliders

Tenéis mas información en la web de Twitter Bootstrap.

Indalcasa iLearning, cursos de formación online de tecnología

El blog / 1 comentario / Por

Entre tantas cosas que me rondan siempre por la cabeza hay una que siempre me ha rondado y es la formación. En indalcasa, intento escribir artículos interesantes, algunos polémicos, otros normalitos, pero intento que todos sean productivos. Siempre he visto un gran problema y es que si escribo un post demasiado largo, es aburrido para leerlo y se hace pesado escribirlo, si es demasiado corto, no tiene tanta productividad para los lectores. Por otro lado un blog es eso, un log de lo que escribes, por lo que salvo que entres desde google, vas a encontrar un popurri de cosas que pueden interesarte o no y aquí es donde surge iLearning.

Me he sacado de la manga Indalcasa iLearning, iLearning es un servicio para dar cobertura al blog, básicamente es una página donde crear cursos online de tecnología actualizados con los contenidos que van surgiendo del blog. ¿Por que crear un centro de contenidos si ya esta el blog? Pues bien fácil, porque si escribimos por ejemplo como hacer templates con wordpress, se va a separar en varios artículos, que si se escriben seguidos a la gente les será de utilidad, pero aún así, tienes que ir escribiendo enlaces al pie del artículo indicando cuales son los otros artículos. También si vienes de fuera, al ser artículos sueltos, es mas difícil de un vistazo rápido, ver todo el contenido de los diferentes «cursos«.

De momento, Indalcasa iLearning será una versión estática en HTML hasta que vaya teniendo tiempo de dinamizar el contenido. Espero que os guste el resultado, mientras tanto podéis ir viendo las actualizaciones en la web de iLearning.

Organización de trabajo, técnicas pomodoro e indalo

Trabajo / 1 comentario / Por

Hace unas semanas estuve en Italia y buscando por internet que significaba pomodoro (tomate), me encontré de casualidad con la técnica pomodoro, que me pareció suficientemente curiosa y que sin saber ya utilizaba. Mirando en la wikipedia, la técnica pomodoro es una técnica en la que nos organizamos el trabajo en pequeñas tareas y nos tomamos descansos entre tareas. Por ejemplo, pongamos una tarea que nos intentamos dividir en tareas menores y nos ponemos unos tiempos para realizar cada tarea de 25 minutos. Con un temporizador, contamos el tiempo y cada 25 minutos, nos tomamos un descanso de 5 o 10 minutos y tras realizar 4 descansos podemos tomarnos un descanso mas largo de 15 o 20 minutos. La verdad es que es una buena técnica para los que vamos  trabajar durante muchas horas seguidas y no queremos morir en el intento.

La variante que yo utilizo es lo que voy a llamar la técnica indalo y es parecida a la técnica pomodoro. En la técnica indalo se intenta defragmentar las tareas en tareas muy pequeñas y relativamente rápidas, cada 4 o 5 tareas, que nos llevaran una media hora, tomamos un descanso de 10 minutos, al ser posible levantarnos del sitio y si queremos mirar algo por internet que sea en otro ordenador. Cuando hacemos 3 o 4 ciclos, según lo cansados que estemos, tomamos una larga pausa de 20 o 30 minutos. Las idea es ser lo mas productivo posible por lo que si una tarea se nos complica y no es bloqueante para hacer otras tareas, pasaremos de largo y continuaremos con la siguiente tarea, de esta forma optimizamos el tiempo en hacer la mayor cantidad de tareas posibles en el menor tiempo.

La técnica indalo (así la he bautizado en honor al blog) la utilizo cuando voy a trabajar durante mucha cantidad de horas seguidas, por ejemplo un sábado que trabaje en casa 15 o 18 horas seguidas, por ello los prolongados descansos. El pasar de una tarea si se complica mucho, es por perspectiva y motivación; si no damos con una solución, al ser tareas muy atomizadas, quizás en un rato tengamos un punto de vista diferente y podamos resolver rápidamente la tarea y si no hay solución fácil, siempre tendremos tiempo para darle vueltas. Atomizar las tareas es muy importante ya que nos dará mucha motivación, si tenemos una larga tarea que nunca termina, nuestra moral estará por los suelos, pero si tenemos esa gran tarea dividida en 10 tareas mucho mas pequeñas, según vamos avanzando y completando tareas, al hacer un análisis nos levantara la moral y nos dará fuerzas para seguir a pesar de llevar muchas horas seguidas.

Lanzar comandos de consola con python y paramiko

Python / 6 comentarios / Por

A veces, desde una web o un script de python, necesitamos poder ejecutar comandos de consola. Para lanzar comandos tenemos 2 formas, una es ejecutar directamente en la consola mediante system y la otra es utilizar un cliente de ssh como paramiko.

En el paquete os tenemos una función llamada system que ejecuta directamente un comando como en consola pasandole como parámetro el comando a ejecutar. Este es el ejemplo más sencillo que podemos hacer. Aunque hay otras formas como por popen, creo que para cosas sencillas es mas rápido os.system. Recordad que hay que importar el paquete os antes de usarlo.

Otra forma de ejecutar comando de consola es hacer uso de paramiko, un magnífico cliente de ssh para python. Con paramiko, podremos hacer uso desde python de conexiones por ssh y sftp, por lo que podremos trabajar directamente contra servidores linux de una forma sencilla. Decir que paramiko no viene por defecto con python y deberéis instalarlo de la página oficial de paramiko o con pip. Recordad también que para utilizar paramiko es recomendable configurar claves ssh para acceder sin contraseña. Para establecer una conexión por ssh con paramiko utilizaremos paramiko.SSHClient para crear un nuevo cliente ssh al que posteriormente conectaremos a un servidor con unas credenciales y por último utilizaremos client.exec_command con nuestro comando a ejecutar. Como veis esto es muy sencillo, aunque puede complicarse por temas de claves, permisos y demás. Ahora unos ejemplos.

Os dejo a continuación un ejemplo de ejecución de un comando por consola:

import os

os.system("cp -r directorio1 directorio2")

Os dejo un ejemplo de conexión con paramiko:

import paramiko

client = paramiko.SSHClient()
client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
client.connect("miserver", username="miusuario", password="mipass")

stdin, stdout, stderr = client.exec_command("cp -r directorio1 directorio2")

Phonegap, programar para móviles en HTML5

Dispositivos móviles / 1 comentario / Por

Programar para dispositivos móviles a veces es una cuestión complicada ya que cada dispositivo cuenta con sus propias herramientas, lenguajes y peculiaridades. Por ejemplo, si queremos programar en Windows Phone, usaremos HTML o C# (.Net), mientras que para Android lo haremos en Java y en Objetive-C para IOS. ¿Cuantos de nosotros tiene tiempo para aprender todo esto como hobby y no de forma profesional? ¿No sería maravilloso poder hacer las aplicaciones móviles sencillas utilizando HTML?

PhoneGap o también conocido como Apache Cordova es un framework que desarrolla (compró) Adobe y que permite crear aplicaciones para dispositivos móviles utilizando HTML. Realmente PhoneGap crea una vista web donde cargará el contenido de la carpeta www del proyecto, cargando en todo momento páginas web en HTML.

Esto esta muy bien, pero ¿Cómo trabajo con los datos? Es fácil, con Javascript. PhoneGap provee de un API en Javascript para interactuar con el teléfono, por ejemplo para el acceso a base de datos, a la cámara, GPS, contactos, etc. Por tanto trabajar con PhoneGap es como hacer una web utilizando un API de javascript especial. También existe la posibilidad de trabajar nativamente, ya que PhoneGap lo único que hace es crear un proyecto especial para el dispositivo, por lo que creara un proyecto de eclipse para android o un proyecto de xcode para IOS, por lo que podemos utilizar plugins nativos o hacernos nosotros mismos el nuestro.

Por último mencionar que PhoneGap tiene soporte para iPhone/iPad, Android, Windows Phone y BlackBerry y en menor medida tiene soporte de Bada, Symbian y WebOS. Así que si quereis hacer una app para IOS, Android o Windows Phone, es una buena opción echarle un vistazo a PhoneGap.

Microsoft prefiere GIT, codeplex y la influencia de github

.Net (C#) / 1 comentario / Por

CodeplexCodeplex, la famosa web de forge de Microsoft me sorprende cada día mas. Aunque Codeplex no me gusta tanto como Github, es cierto que da muy buena salida a los proyectos realizados en .Net, por lo que aunque en mis proyectos open source utilizo Github, tengo los repositorios clonados en Codeplex. Microsoft cada día me sorprende mas, si ya me sonreía al entrar en la pagina de asp.net y encontrar que muchos proyectos que Microsoft recomienda, muchos de ellos eran en PHP. Ahora Microsoft vuelve a sorprender, esta vez con Codeplex, donde originalmente se ofrecían servicios de control de código fuente por Team Foundation, poco a poco han ido ampliando la variedad de servicios, añadiendo SVN, Mercurial y poco después GIT.

Si navegamos entre los diferentes repositorios de Codeplex, podremos encontrar el de ASP.Net MVC, que curiosamente, no está en Team Foundation, ni SVN, no no, esta en GIT y solo GIT. Curioso ver esta jugada de Microsoft, ¿Será que los propios ingenieros prefieren usar la potencia de GIT en lugar de sus propias herramientas? Para el interesado que quiera verlo, puede entrar en la web del proyecto de ASP.Net MVC en Codeplex.

Altair Studios desarrollando el futuro de la web

Altair Studios / 1 comentario / Por

Altair StudiosHoy no vengo a hablar acerca de una aplicación, una web o de tecnología en general. Hoy voy a hablar de un sueño que he perseguido, aunque también temido durante mucho tiempo. Febrero de 2012 para mi siempre será recordado con cierto cariño, pues, a pesar de llevar años realizando trabajos como freelance, fue el día 1 de Febrero de 2012 cuando normalice mi situación y cree mi propia empresa.

Altair Studios nace con la idea de ser no solo una empresa de desarrollo web, sino también  que Altair Studios sea una empresa de desarrollo de nuevas tecnologías. Claro ejemplo de ello son proyectos como AltairStudios.Core o UserAgent Theme Switcher, ambos grandes proyectos en el marco de nuevos desarrollos, aplicando las nuevas tecnologías que var surgiendo para dar un resultado como y fácil de utilizar al usuario final.

Ya por el año 2005, el sueño de crear mi propia empresa con Murgi Soft, quedo en la cuneta cuando todo esta casi preparado. Hoy, 7 años después, que no solo son 7 años pasados, sino 7 años de experiencia, aprendiendo lenguajes, metodologías de trabajo, aplicando las mejores herramientas posibles, para que los clientes de Altair Studios tengan el resultado mas satisfactorio posible al mejor precio del mercado, ya que tasamos el precio de nuestro tiempo al precio real y consciente de los tiempos que corren.

En los 3 meses de vida que tiene Altair Studios, al menos puedo decir, que dados los tiempos de crisis en los que nos encontramos, al menos puedo presumir de tener beneficios y espero que siga siendo así por muchos años.

Scroll al inicio