lunes, 16 de diciembre de 2013

Jquery Mobile : Overlay Panel desde abajo

JQuery Mobile recientemente a agregado un interesante widget llamado "panel" el cual es muy bonito para mostrar informacion en los lados de tu App.  Pueden un ejemplo aqui : 


A mi me gusta mucho esta manera de mostrar informacion. Recientemente necesitaba usar uno de esos panales pero queria que este saliera desde abajo, intentando imitar el comportamiento de algunas Apps que habia visto pot ahi.

Bueno JQuery Mobile no tiene esa funcionalidad por ahora en los panales, seguro lo agregan mas adelante, Asi que despues de una extensa busqueda en internet sin exito, he decidido programarlo yo mismo y a mi paracer el resultado quedo bastante decenton,  no perfecto pero decente :)

Como lei en muchas paginas en interent, hay bastante gente buscando este comportamiento por lo cual decidi compartirlo.  Haciendo click en "list of items" podran abrir el panel con una listview de JQuery Mobile






sábado, 14 de diciembre de 2013

El color de piel de jesus

Sobre el color de piel de jesus : 

Según el consenso de expertos científicos Jesús era, como la mayoría de Judios del primer siglo, probablemente un hombre de piel oscura. Algunos artistas occidentales populares representaron a jesus como blanco de ojos azules ,Talvez impulsados por algunos versículos bíblicos que que hablan sobre la pureza, la rectitud y la oscuridad del pecado y del mal.

El único problema es que las representaciones son históricamente inexactas,Escrituras cristianas dicen muy poco acerca de la apariencia física de Jesús. Ellos no hacen ningún comentario sobre la nariz, color de ojos, pigmentación de la piel ó el cabello . Como algunos historiadores y teólogos han planteado, el silencio de las Escrituras sobre el tema de color de la piel de Jesús es fundamental para el gran atractivo del cristianismo con gente de varias etnias. En un mundo donde la raza a menudo divide a las comunidades e incluso las iglesias, las representaciones bíblicas del hijo de Dios lo posicionan como uno que puede unir esas brechas.

Como Martin Luther King Jr.’s dijo una vez : "¿Por qué Dios hizo a Jesús blanco, cuando la mayoría de los pueblos del mundo no son blancos? 

Su respuesta fue : "El color de la piel de Jesús es de poca o ninguna importancia" porque lo que hizo a Jesús excepcional  fue "Su disposición a entregar su voluntad a la voluntad de Dios.".

Mientras esperamos su llegada la mayoria seguirá creyendo que jesus luce como un super modelo escandinavo de ojos azules.

link: http://www.theatlantic.com/politics/archive/2013/12/insisting-jesus-was-white-is-bad-history-and-bad-theology/282310/

sábado, 23 de noviembre de 2013

Galeria de estilo de colores para tus mapas Google Maps

Con la API de Google Maps nosotros podemos crear mapas personalizados cambiando los colores por los que nosotros queramos usando un arreglo de estilos. Pero esto puede ser muy tedioso al querer  lograr un resultado decente con los colores perfectos.

Con este problema en mente, ha nacido http://snazzymaps.com/ , una web con una colección de estilos de mapas Google Maps que puedes aplicar a tus propios mapas. Muy util para usar en tus proyectos de manera rápida.



Tutorial sobre sublime text

Si quieres un buen tutorial sobre el editor de moda hoy en dia Sublime text , te recomiendo este link donde podrás encontrar tutoriales gratuitos de https://tutsplus.com/ , que están muy buenos.

link : https://tutsplus.com/course/improve-workflow-in-sublime-text-2/

Y tambien si quieres sacarle el maximo a este super editor recomiendo que visites este link:

link: http://scotch.io/bar-talk/best-of-sublime-text-3-features-plugins-and-settings


Responsive image con Mobify.js

He leído incontables artículos sobre como tratar el problema de responsive images, debido a que no tenemos un estándar todavía para resolver este problema, muchas soluciones aparecen día a día tratando de resolverlo. 

Pero entre todas las soluciones que leo, en mi opinión personal esta es  la mejor de todas:  Mobify.js es una librería open source para mejorar los sitios responsive, la cual automáticamente redimensiona y comprime las imágenes sin escribir nada de código, simplemente entregamos nuestra imagen en alta resolución y la API se encargara del resto por nosotros.

Para saber mas sobre su uso y un análisis detallado sobre como funciona les dejo el siguiente link, la verdad que mejor articulo que este no hay sobre el uso de esta librería .


¿Sabes cuánto cobrar por una hora de tus servicios?

Interesante web donde con solo responder 6 sencillas preguntas no ayudara a saber cuanto debemos cobrar por nuestros servicios.

link: http://cosmonauta.mx/toolbox/precioporhora.html

Elementos HTML con float escapan de su contenedor padre.

Cuando usas la propiedad CSS "float" en algunos elementos estos salen del flujo normal del documento y provoca que los mismos salgan de su contenedor padre. Muchos blogs recomiendan insertar un elemento HTML con la propiedad "clear:both" después de los elementos para resolver el problema. Hoy hice una pequeña recopilación de como resolver este problema de 3 maneras distintas, en el siguiente ejemplo.



La verdad que en la tercera opcion funciona correctamente pero no logro entender el por que. La que mas me ha gustado es la segunda opcion usando :after de css3 .

Link para leer un poco sobre block formatting; http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

Link: http://html5hub.com/after-float/#i.685flmb6repov7


Debugging con console.table() en Google Chrome

No hace mucho leí un articulo sobre el uso de console.table() , una función del modo consola en Google Chrome para una mejor presentación de datos. Es una interesante manera de mostrar los datos que el clasico console.log(). Aqui les dejo un ejemplo de como usarlo:


Muy simple de usarlo y con una presentación de datos muy cómoda.También trabaja con objectos por ejemplo si tenes un objecto y cada propiedad del objecto es otro objecto. 




sábado, 9 de noviembre de 2013

Facebook Plugin Comment no aparece

Existe un comportamiento muy interesante con el plugin de comentarios de Facebook. Que algunas veces no aparece en pantalla, en algunos blog la solución común es utilizar el método:

FB.XFBML.parse();

Que reparsea todo el contenido forzando a que aparezca los comentarios en tu pagina. Pero hay un comportamiento un tanto extraño que pasa cuando tienes tus comentarios Facebook ocultos y con alguna acción del usuario quieres que sean mostrados. El problema es que al parecer el plugin Facebook toma el ancho de su padre para crear la caja de los comentarios y ese ancho es asignado al iframe.

El problema es que si el elemento padre de los comentarios esta oculto el plugin Facebook toma el ancho 0px para el iframe lo que ocasiona que no sea mostrado en pantalla, por que no tiene ancho alguno. Lo que tenemos que hacer en este caso es llamar a FB.XFBML.parse  hasta que el elemento padre este visible.

He creado un ejemplo de este comportamiento en el siguiente link , el cual puedes ver como el plugin de comentarios no aparece la primera vez cuando le haces click pero si remueves los comentarios de esta linea de codigo :

//FB.XFBML.parse();

Podrás ver como aparecen, esto pasa por que le estamos pasando una callback al método show de jquery que se ejecutara hasta que el elemento este visible, de esta manera el plugin puede tomar el ancho del padre para crearse.



link : http://jsfiddle.net/SaulBurgos/tDQMZ/


Error PHP Warning: Cannot modify header information - headers already sent by

Como programador PHP en algún momento te habrás encontrado con este mensaje de error al momento de usar cookies ó haciendo una redirección con PHP  :

Warning: Cannot modify header information - headers already sent by

El problema con este error es que en algún lado de tu script php ya se ha enviado información sobre tu pagina web, por ejemplo con algún echo o algo asi. Estos casos son mas comunes cuando estas trabajando un en proyecto existente y no sabes por donde esta la linea de código que ha enviado información.

Para resolver este problema tiene que usar Output Buffering para evitar que se envie informacion al navegador antes de tiempo. Normalmente PHP  sin output buffering envia al navegador el codigo generado por tu script en pedazos, cada vez que encuentra un echo ó un print inmediatamente lo envia al navegador procesando asi todo tu script PHP. Pero con output buffering activado todo el codigo generado es guardado en una variable  hasta que todo el script PHP es leido y solo hasta después es enviado al navegador como una sola pieza.

Una ventaja de usar output buffering es que disminuye la cantidad de tiempo que toma mostrar una pagina por que no es enviada en pedazos.

Para ver un ejemplo sencillo de su uso, puedes visitar el siguiente link de Brian Cray donde tiene unos ejemplos muy buenos y mucha mas información sobre su uso.

Link : http://web.archive.org/web/20101216035343/http://dev-tips.com/featured/output-buffering-for-web-developers-a-beginners-guide

PHP manual : http://php.net/manual/en/function.ob-start.php




domingo, 27 de octubre de 2013

Verificar compatibilidad de navegadores

Por lo general cuando estoy en un proyecto web y quiero saber si una API es compatible con algunos navegadores, siempre reviso la web de http://www.w3schools.com/ o alguna que otra web similar. En estas webs por lo general no se muestra la compatibilidad con navegadores móviles, lo cual es muy importante hoy en día.

Hoy me ha llegado una web llamada http://caniuse.com/, que es excelente para este propósito mostrando en una tabla sencilla una lista de navegadores de escritorio y móviles con el tipo de compatibilidad que estas buscando. Excelente herramienta para saber que una API es soportada por algún navegador en especifico y una de las mejores que he visto.

Una web importante a tener en cuenta si eres desarrollador web.

link : http://caniuse.com/

martes, 15 de octubre de 2013

PHP mostrar los mesajes de error del codigo

Algunas ocasiones cuando estas trabajando con PHP en un proyecto existente, te das cuenta que la aplicación no muestra ningún mensaje de error, aun cuando deliberadamente tu escribes mal algún método solo para ver si se muestra un error, y lo unico que obtienes es una pagina en blanco.

Esta pasa algunas veces por que en el servidor están desactivados los mensajes de error, lo cual es un problema  por que no podemos saber que nos esta causando el problema. Algunas veces para solucionar esto, es tan fácil  con solo agregar las siguientes lineas al inicio de tu script PHP :

error_reporting(E_ALL);

ini_set('display_errors', '1');



Pero algunas veces esto no funciona, cuando esto falla lo único que queda por hacer es crear un script PHP adicional por ejemplo llamado "first.php" que contenga las lineas anteriores de código, adicional a estas lineas haremos un "include" ó "requiere" con la ruta del script PHP donde creemos que esta el error. Entonces a través  de "first.php" vamos a acceder a nuestro script que tenemos que debuguear, de esta manera vamos a forzar a PHP a mostrar los errores en ese script que nos servirá de intermediario.

Esto pasa por que PHP necesita parsear el código antes de ejecutarlo y si existe algún error de parseo en mismo script donde estas definiendo la configuración para mostrar los errores, estos no se mostraran al momento que se encuentre un error. Por eso es recomendable dividir tu código en varias secciones y después incluirlos en un único script con "include" ó "requiere".

sábado, 12 de octubre de 2013

Una App en HTML 5 es igual de rapida que una APP nativa en moviles

Interesante articulo que he encontrado de los chicos de Sencha donde demuestran con un vídeo que las App desarrolladas sobre HTML 5 son tan rápidas como los App nativas en móviles. Y que algunas veces es el mal uso de la tecnología que algunos programadores hacen de HTML 5.

Parece que todo comenzó cuando Mark Zuckerberg dijo que HTML 5 no estaba listo, en respuesta sobre las quejas de que la App de facebook era muy lenta. Eso llevo a que los chicos de Sencha se pusieran manos a la obra y crearon un prototipo de una App de facebook sobre HTML 5.

Tuvieron que hacer algunos cambios sobre su framework actual pero en el proceso  crearon un interesante componente que ellos llaman : "Infinite List Component", que maneja un numero desconocidos de items. En el proceso solo un pequeño set de DOM es creado para mostrar en la área visible de la pantalla,  de esta manera están constantemente reciclando los elementos  cuando los datos son requeridos.

Aquí el vídeo de la demostración de la App:




y el articulo completo sobre el proceso de creación :

http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story




martes, 8 de octubre de 2013

Juego estilo RPG para desarrolladores web.



Hoy encontré un juego un tanto interesante con estilo RPG donde podemos crear un personaje basado en sus habilidades de desarrollo web, la verdad que es muy entretenido pero el verdadero uso que le veo es que si eres nuevo en esto del desarrollo web este juego te puede dar un excelente idea de lo que debes aprender para crear sitios web. Ya que proporciona enlaces a la documentación necesaria para desarrollar cada habilidad. La verdad que esta muy buena la idea de este juego la recomiendo si no sabes por donde empezar con esto del desarrollo web.

link  : http://www.dungeonsanddevelopers.com/

La Table API de javascript

JQuery es la librería javascript  mas popular de  la web, todo el mundo la usa, incluso para hacer cosas sencillas que podríamos hacerla con javascript puro, olvidando por un momento el soporte nativo de javascript en los navegadores. Por tal razón esta vez quiero hablar sobre la Table API  para trabajar con tablas sin Jquery solo con javascript puro que he visto en un articulo.

Usualmente usamos  JQuery para trabajar con tablas insertando elementos con "append", "after", "before", y otro métodos. Pero también tenemos a nuestra disposición los siguientes métodos con javascript puro para trabajar con tablas.
  • insertRow()
  • deleteRow()
  • insertCell()
  • deleteCell()
  • createCaption()
  • deleteCaption()
  • createTHead()
  • deleteTHead()
Y las siguientes propiedades : 
  • caption
  • tHead
  • tFoot
  • rows
  • rows.cells
Con estos métodos y propiedades podemos crear todos los elementos de una tabla de manera sencilla y con buen soporte nativo de javascript en cualquier navegador. Creando un código mas limpio y fácil de entender.

Ver demo de la API




domingo, 29 de septiembre de 2013

Github y php : Hacer commit y push via Https


Este articulo lo escribo como experiencia que una vez tuve con un cliente, no estoy seguro que pueda funcionar para otras personas pero quiera publicarlo para que sea de ayuda para otras personas

Github es el popular servicio para alojar proyectos utilizando el sistema de control de versiones llamado Git. En esta parte quiero aclarar que Github y Git no son lo mismo, para entender un poco mas en detalle la diferencia puedes visitar este link

Hoy he tenido la oportunidad de trabajar en un proyecto donde un script PHP tiene que crear una serie de archivos, y esos archivos tienen que ser subidos automáticamente a un repositorio en Github. Quiero compartir la manera en que logre hacerlo, para que sirva de guía para otras personas. Tal vez no sea una de las  mejores técnicas pero logro obtener el resultado deseado, partiendo de esto puedes mejorar la técnica.

Lo primero que tenemos que hacer es  crear una cuenta en Github y crear un repositorio. Después con nuestro repositorio creado obtener la URL de mismo. Ejemplo:

https://github.com/SaulBurgos/temp.git.

Lo mas importante aquí es  primero verificar si en tu servidor web, tienes instalado Git. En esta sección no
puedo ofrecer mucha ayuda ya que puede variar según tu compañía de host. Pero a manera general puede ser descritos de esta manera:

  • Si tienes acceso a la terminal de tu servidor y puedes ejecutar comandos, pues solo tienes que seguir la guía de instalación en  http://git-scm.com/download/
  • Si no tienes acceso a la terminal, puedes consultar con tu proveedor de hosting de como instalar Git y te puedan dar acceso a la terminal para ejecutar comandos Git.
Lo siguiente es agregar nuestro repositorio Github a Git, donde haremos PUSH para enviar todo los archivos creados. Normalmente la configuración de un repositorio Github en Git seria asi:

git remote add 'origin' https://github.com/SaulBurgos/temp.git

De esta manera normalmente si hacemos push con el comando : 

 git push 'origin' master 

Nos preguntara el user y password y después subirá los archivos a Github. Pero como vamos a ejecutar comandos Git por medio de un script PHP necesitamos hacerlo un tanto diferente, para no tener que escribir el user y password.


 Lo primero es que vamos usar la autenticacion Github OAuth la cual nos permitirá hacer PUSH por medio de autenticacion HTTPS. Para esto necesitamos crear un "Personal Access Tokens" en nuestra  cuenta Github. Esto lo puedes hacer en settings > Applications > Personal Access Tokens.


Una vez que creas el tokens obtendrás algo como esto :

1912313134f10c7fghfghfhfhf506385f3877bedc1e

Este sera el token que usaremos para agregar nuestro repositorio Github a git usando esta estructura :

 "https://<OAuthToken>@github.com/username/application.git"

 La cual la nuestra quedaría de esta manera :

 https://1912313134f10c7fghfghfhfhf506385f3877bedc1e@github.com/SaulBurgos/temp.git

y nuestro comando Git para agregarlo  seria  :

git remote add 'github'  https://19686434f10c7fghfghfhfhf506385f3877bedc1e@github.com/SaulBurgos/temp.git

Con esto hemos terminado la configuracion de Git. Los comandos Git que utilizaremos en nuestro script PHP seran :
  •  git add -A
  • git commit
  • git push

Supongamos que hemos creado un repositorio Git y esta sera la estructura de nuestro proyecto :

/web/repo/   -> Aquí esta nuestro repositorio Git.(archivos a subir)
/web/script.php  -> Script PHP  que ejecutara los comandos Git.

La forma en que esto funciona es que el script PHP ejecutara comandos de terminal Git cuando se ejecute, así cualquier acción que queramos hacer con Git la haremos con PHP. Para ejecutar comandos de terminal con PHP usamos el método : exec. Ahora nuestro código PHP en el script sera este:

<?php
$pathRepo = __DIR__.'/repo';
chdir($pathRepo);  
exec("git add -A");
exec("git commit -m 'description del commit'");
exec("git push 'github' master --progress 2>&1");
?>
Ahora con solo estas linea de codido, cada vez que nuestro script se ejecute hara COMMIT y PUSH hacia Github, con los archivos que se encuentran en /web/repo/ sin pedir credenciales ya que estamos usando nuestro token OAuth. A cada uno de estos comando puedes hacerles un echo para ver los mensajes que devuelven. El método PHP chdir nos cambia de directorio para poder trabajar en la carpeta del repositorio.
Si lo prefieres puedes usar esta libreria para trabajar de una manera mas comoda : https://github.com/ornicar/php-git-repo , pero de antemano les advierto que no la he probado a fondo.

Libro de Google Maps




Hoy tengo el agrado de presentarles un libro en el cual he estado trabajando por 8 meses en mi tiempo libre. El cual en estos momentos se encuentra en la etapa final de edición. El libro trata sobre como usar la herramienta de mapas de Google Maps, enfocado específicamente en el uso de la API con javascript.

El libro esta orientado a desarrolladores web que desean integrar mapas en sus proyectos, pero que no tienen idea por donde iniciar con Google Maps. Desarrolladores en busca de una  guía paso a paso del proceso de creación de mapas.

El objetivo del libro es servir de guía a los principiantes de como usar la API de Google Maps, desde lo mas básico hasta las herramientas avanzadas de dibujo. Ayudando al principiante desde los inicios de como debe de leer la documentación oficial hasta preparar los datos para ser guardados en una base de datos.

En el libro podrás aprender lo siguiente :
  1. Los fundamentos básicos de coordenadas para trabajar con Google Maps, es decir el uso de latitud y longitud para localizar un punto en el mapa.
  2. Crear figuras geométricas para delimitar zonas y áreas geográficas de interés en el mapa.
  3. Uso de librerías externas, con el fin de extender la funcionalidad de Google Maps al trabajar con overlays.
  4. Geolocalizar al usuario, según su posición actual por medio de dispositivos móviles,usando HTML 5.
  5. Crear eventos sobre el mapa para interactuar con el usuario ó mostrar información relevante sobre el punto de interés.
  6. Trabajar con múltiples figuras geométricas al mismo tiempo en el mapa.
  7. Cómo preparar los datos del mapa y figuras geométricas para ser guardados en una base de datos.
Puedes descargar un capitulo de muestra gratis y obtener mas información en el siguiente link :



martes, 17 de septiembre de 2013

Googlemaps 3.14 problemas con el CSS

La nueva versión de googleMaps 3.14 agrega nuevas reglas CSS al mapa que dan estilo a los elementos en el viewport, por ejemplo la infowindows y algunos botones. La nueva versión tiene un estilo mas bonito y agradable a la vista.

Pero si tienes un proyecto web existente y no has especificado la versión de googleMaps a utilizar, como por ejemplo de esta forma :

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Lo que puede pasar es que googleMaps usara la ultima version disponible, como resultado en la ultima version 3.14 aplicara sus propios estilos CSS a todos los elementos del mapa. Esto puede ocasionar que tus infowindows o cualquier elemento personalizado que tengas en el viewport, luzca diferente o algunas veces terrible y con estilo de fuente distinto.

Para resolver esto,  puedes luchar con todos los estilos CSS que estan sobre escribiendo los tuyos, el problema es que googleMaps tienes estilos demasiados genericos usando la clase "gm-style" ejemplo:

.gm-style div, .gm-style span, .gm-style label {
   text-decoration: none;
}

Otra Solucion seria especificar la versión de googleMaps, cuando cargues la API. Y por ultimo otra solución, que no es totalmente de mi agrado pero es la única que he encontrado por el momento, es remover la clase "gm-style" con Jquery o puro javacript, no es una solución muy fancy que digamos pero por el momento es lo único que he encontrado.

Para ver un ejemplo de como funciona visita el siguiente enlace con un ejemplo que he preparado. Para remover la clase solo haz click en el boton "remove style" del panel de color verde y veras que los estilos son removidos.





Convierte cualquier archivo a cualquier formato

Interesante web que ofrece convertir cualquier archivo a cualquier formato, solo tenemos que subir un archivo y escoger el formato deseado. Lo que me sorprende es la cantidad de formato soportados. La verdad que una util herramienta para tenerla entre tus marcadores del navegador, nunca se sabe cuando puedes necesitar algo asi. 

Aqui dejo un enlace de los formatos : https://cloudconvert.org/formats

y el link de la web : https://cloudconvert.org/

miércoles, 4 de septiembre de 2013

Estas matando el derecho al anonimato de tus hij@

Cualquier padre en el mundo con una cuenta facebook le gusta poner fotos de su hijo durante el embarazo y después del nacimiento, en sus cuentas de facebook crean albumes con  fotos de cada momento de su vida al igual que  publican en sus muros cada actividad  sobre su hijo. Es algo totalmente comprensible ¿ a quien no le gusta capturar cada momento  especial de su hijo en la vida ? 

Algo interesante que sucedió recientemente es que facebook actualizo sus políticas de privacidad (de nuevo) y hay una parte que dice : 

" We are able to suggest that your friend tag you in a picture by scanning and comparing your friend’s pictures to information we’ve put together from your profile pictures and the other photos in which you’ve been tagged."

Básicamente es que facebook con sus algoritmos de reconocimiento facial buscara en todas las fotos de tus amigos donde tu apareces , creando un registro de actividad en todo momento en sus bases de datos sin que tu lo sepas, cada vez que alguien suba una foto facebook sabrá si tu estabas ahí.

Como algunos ya sabrán en estos tiempos mantener el anonimato online es una tarea imposible sea por que nosotros mismos publicamos nuestra información en redes sociales o  por la NSA y su proyecto PRISM. De todas maneras los padres con cuenta facebook lo hacen por su propia voluntad  publicando contenido acerca de sus vidas personales y sus familias.

El problema es  que estos padres están privando de toda esperanza a sus hijos de tener anonimato en el futuro, por ejemplo todo mundo sabe lo difícil que es ser adolescente donde ciertas situaciones te parecen penosas o embarazosas, ahora imagina todas las fotos que tus padre pudieron haber subido a facebook de ti en ciertas situaciones que no quieres que nadie sepa las cuales son fácilmente accesibles gracias a facebook. 

Otra situación es que hoy en día es común que empresas hagan revisiones de ti en las redes sociales, por ejemplo aqui hay un articulo al respecto , y gracias a tus padres tendrán acceso a casi toda tu vida desde que eras niñ@.

Hay parejas que cuando sostienen peleas matrimoniales salen corriendo a publicar sus sentimientos en facebook , ¿ realmente quieres que tu hijo en el futuro sea relacionado con este tipo de actividades ?

Ciertamente estos padres esta creando un perfil y historial digital online que en un futuro sus hijos tal vez no quieran tener y lo mas preocupante es que nunca podrán tener la oportunidad de anonimato digital por que desde antes que nacieran fue arrebatado por sus padres.

Para ponerle algo extra a este articulo pongo estos video interesantes: