Video tutorial introduccion a Google Maps API

Si alguna vez te ha interesado en crear mapas para tu sitios webs en Google Developers han publicado 4 vídeos introductorios sobre la API de Google Maps, aunque están en ingles puedes poner los subtitulos, los cuales pueden guiarte mejor. Los vídeos cubren lo mas básico para  principiantes que quieren comenzar a trabajar con mapas en sus webs.







Adicional a estos videos puedes ver el capitulo de ejemplo de mi libro introductorio a Google Maps donde puedes encontrar un pequeño tutorial sobre como empezar con Google Maps en este link

http://webmasternoob.blogspot.com/2016/01/libro-google-maps-javascript-indice.html


Tambien google tiene un Curso oficial: https://www.udacity.com/course/google-maps-apis--ud864

link: http://googlegeodevelopers.blogspot.com/2013/12/fab-friday-is-google-maps-video-fest.html

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 : 

http://view.jquerymobile.com/1.3.2/dist/demos/widgets/panels/ 

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

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/

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 .

link : http://mobile.smashingmagazine.com/2013/10/24/automate-your-responsive-images-with-mobify-js/

¿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. 

link: http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

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

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/

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".

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

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

Link table API :  https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

link : http://coding.smashingmagazine.com/2013/10/06/inside-the-box-with-vanilla-javascript/

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 :

  Libro de Google Maps

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.

 http://jsfiddle.net/SaulBurgos/GNBA

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/

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:

Cambiar el look del modo consola de Google Chrome

Estas aburrido del mismo estilo del modo consola de Google Chrome ?

En esta pagina puedes personalizarlo, aunque no son oficiales y puede que tengan algún bug escondido se agradece el esfuerzo por hacer el proceso de desarrollo menos monótono.

Linik : http://devthemez.com/themes/chrome-developer-tools

Y un tips que mire hoy en twitter para buscar funciones en modo consola con Chrome :

Solo crea una "Add Watch Expresion" con el nombre de la función y después haz click derecho sobre ella.

Crea imágenes interactiva con thinglink.com

Navegando hoy por la red me he encontrado con un servicio muy interesante que nos permite insertar información, vídeos y links dentro de una imagen, de esta manera nuestra imagen puede ofrecer información adicional  sobre lo que se muestra.

El servicio es gratuito y tiene una versión de pago para empresas. Se me ocurren muchos campos de como usar este servicio ya sea en productos , presentaciones , educación , etc. La verdad que los usos son innumerables.

El servicio funciona  como una red social donde puedes seguir a otros usuarios y ver sus creaciones , una de las cosas que mas me gusta es que te permite insertar tu imagen con una simple etiqueta <img> HTML.

 bueno ahora les dejare unos ejemplos para que se den una idea de lo que hablo.

Link: https://www.thinglink.com

Centrado Horizontal y vertical con CSS ( El santo grial !!! )

En nuestro trabajo como programador Web en la etapa de maquetacion es común encontrarse con la situación en la  que quieres centrar un elemento en la pantalla vertical y horizontalmente, yo siempre he recurrido a google para buscar las mejores técnicas para lograr esto, lo que ocasiona que en cada proyecto nuevo que hago siempre uso una técnica diferente y he visto muchas que cumple el objetivo.

Pero esta vez he encontrado una de las mejores que visto y sencillas de usar con diferentes elementos HTML en un articulo que aunque esta en ingles es muy sencillo de entender y con muchos ejemplos.

Aqui el articulo : http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

Herramienta super sencilla para crear cursos en internet

Esta es la herramientas mas sencilla que he encontrado hasta ahora para crear cursos en internet , Si alguna vez has tenido  la idea de enseñar sobre algún tema esta es tu oportunidad.



link: https://eliademy.com/

Herramientas para pruebas Cross-browser para tus proyectos web

Hoy en día las personas navegan en Internet con múltiples dispositivos por lo cual nuestros proyectos web necesitan estar preparados para cualquier resolución de pantalla , para solucionar este problema es que surgieron algunas técnicas como   " Responsive design " y "Adaptive design" de esta manera nuestras App web pueden adaptarse a cualquier resolución de pantalla y mostrar la información correctamente.

Existe una gran multitud de dispositivos móviles hoy en día y puede llegar a ser todo un reto desarrollar un sitio web que presente la misma consistencia y experiencia al usuario en todos ellos. Por esta razón siempre es buena idea hacer pruebas de Cross-browser  en palabras siemples significa probar nuestro proyecto en diferentes versiones de navegadores como  Internet Explorer, Chrome, Safari, Firefox , Opera , ect.

Cuando estamos en esta etapa de prueba siempre es bueno hacerte algunas de las siguientes preguntas:

¿ Se mira el sitio correctamente ?

¿ La interacción es la misma ?

¿ Mi sitio web luce correctamente en móviles ?

 ¿ Esta optimizado para móviles ?

Nuestro objetivo con esto es conseguir una experiencia consistente en una gran variedad de dispositivos para el usuario final , para ayudarnos en esta meta existen muchas herramientas disponibles que puede ayudarnos en el proceso de probar nuestros sitios en diferentes resoluciones, algunas siendo de pagos y otras gratuitas y los re-dimensionadores que solo emulan las resoluciones de pantalla.

Algunas de las herramientas disponibles son estas : 

De pago

http://vanamco.com/ghostlab/

http://html.adobe.com/edge/inspect/

http://www.browserstack.com/

Redismensionares

http://jamus.co.uk/demos/rwd-demonstrations/

http://lab.maltewassermann.com/viewport-resizer/

http://cybercrab.com/screencheck/

http://www.studiopress.com/responsive/

Existen también unos programas llamados emuladores que cumplen la misma función pero crean entornos  de pruebas de móviles en tu Pc de escritorio, Maximiliano Firtman ha creado una lista de emuladores que puedes consultar:

http://www.mobilexweb.com/emulators

Y por ultimo los navegadores también tienen algunas herramientas para probar tus sitios por ejemplo google chrome en el modo consola tienes estas opciones a las que puedes acceder por DevTools > Settings > Overrides.

  Firefox también no se queda atrás con su modo "Responsive Design View" : 

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View

También existen algunas herramientas para mostrar en el navegador una previa vista de tu APP Android ó IOS sin que tu cliente tenga que instalar tu APP

http://www.appsurfer.com/
https://app.io/

Wordpress error : THE PLUGIN GENERATED XXX CHARACTERS OF UNEXPECTED OUTPUT DURING ACTIVATION

Mientras trabajo en la creacion de un plugin me encontre con el siguiente error en la activacion del plugin:

"The plugin generated xxx characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin."

Wodpress no es muy claro para decirnos el tipo de error que necesitamos corregir , por lo tanto
necesitamos encontrar una manera para saber cual es el error que ocurrio durante la activacion
del plugin , wordpres trabaja con algo llamado "hook" donde podemos ejecutar algun
metodo entonces escribimos en nuestro plugin la siguiente linea

function catchErrorPlugin()
{
    file_put_contents('./wp_plugin_error.log', ob_get_contents());
}
add_action('activated_plugin', 'catchErrorPlugin');

Esto va crear un archivo con la descripcion exacta del error que necesitamos corregir .

Wordpress: Creando plugin con WP_List_Table y undefined function convert_to_screen()

Trabajando en la creacion de un plugin para wordpress donde tengo que usar  la clase " WP_List_Table " me encontre con el siguiente error en la parte del front-end  cuando instancias la clase para crear la tabla.

undefined function convert_to_screen() 

El problema con esto es que WP_List_Table no encuentra el metodo que se encuentra en "wp-admin/includes/template.php " buscando en interent fue todo un caos , algunos dicen que es un bug , otros dicen que pasa por que ese ese metodo solo accesible para el area de admin ya que ahi no pasa el error.

Bueno solo escribo aqui para postear como he solucionado el error tienes que agregar estas linea donde estas extendiendo la clase WP_List_Table.

if(!class_exists('WP_List_Table')){
    require_once( ABSPATH .'wp-admin/includes/template.php');
    require_once( ABSPATH .'wp-admin/includes/class-wp-list-table.php' );
}   

Al agregar "template.php" WP_List_Table tendra acceso al metodo que necesita , estoy seguro que en terminos de seguridad no es correcto acceder a metodos admin en el front-end pero tenia que solucionar el problema.

Como mandar informacion secreta encriptada

Con todo el asunto que paso recientemente con el caso de PRISM el proyecto ultra secreto del EEUU donde nos espía a todos en el planeta  y tiene acceso todos nuestros datos de google , facebook , twitter , yahoo , etc.

Viene la pregunta y ahora que hacemos ? como puedo enviar alguna información sin que el gobierno de EEUU tenga acceso a ellos , ya que si envías un sms , email o haces una llamada telefónica ten por seguro que el gobierno tiene esos datos por que la compañías no encriptan esa información en sus bases de datos.

Bueno con esto en mente hay una web que te permite enviar información de carácter ultra secreto encriptado y una vez que es leído destruye el mensaje todo esto de manera totalmente anónimo y gratuito , por ahora es lo seguro que se puede usar para enviar información , ya que si quieres enviar tu numero de tarjeta de crédito por correo es una mala idea . link del servicio abajo

link: https://www.noteshred.com/

Para que sirve Underscore.js

En este post quiero hablar de underscore.js una libreria javascript que nos ofrece muchas utilidades que nos harán las vida mas fácil al trabajar con tipos de datos object y array , la razón por la que hago este  post es para ofrecer ejemplos un poco mas prácticos  de lo que puede hacer underscore.js.

Hace un tiempo atrás yo no conocía esta librería y por razones de trabajo tuve a revisar su pagina oficial para saber de que se trataba , la primera vez que leí la documentación y ver algunos ejemplos de la pagina no me termino de convencer y no le preste mucha atención a la librería e incluso pensé que era una perdida de tiempo , pero después varios amigos del trabajo me explicaron el uso de underscore.js aplicados con ejemplos reales en proyectos y hasta ese momento me di cuenta del potencial de esta librería.

Si nadie me hubiera explicado el uso de underscore.js con usos prácticos nunca me hubiera interesado en la librería   , creo que los ejemplos de la pagina oficial no lograron transmitirme el verdadero potencial de esta librería por esta razon escribo este post para tratar transmitir a otros lo que yo no entendi en su momento.

Para los siguientes ejemplos puedes usar el modo consola de google chrome para ejecutarlos o puedes crear un proyecto pequeño en tu maquina , todas las instrucciones de como usar la librería están en la pagina oficial de underscore.js aqui solo veremos ejemplos practicos de algunos metodos.

Lo primero que necesitamos es un arreglo de objetos que nos simulen datos provenientes de una BD : 

var json = [ 
{ "id": "18741DB9-B869-B378-8624-0B9F593F84BA", "name": "Ross", "email": "lobortis@arcuetpede.ca", "about": "nisl. Quisque fringilla euismod enim.", "title": "Mr." }, { "id": "E2D7A39E-4583-A27A-BC55-98489F062FB1", "name": "Bruno", "email": "egestas.nunc@eratvitaerisus.edu", "about": "Donec tincidunt. Donec vitae erat", "title": "Ms." }, { "id": "26CC1826-2BBA-5ABB-CB7E-D06AD96D1A23", "name": "Audra", "email": "tincidunt.vehicula.risus@tempus.com", "about": "Nullam suscipit, est ac facilisis", "title": "Mr." }, { "id": "4F0FCC7A-A715-4AC2-B64F-830AA3441995", "name": "Kelsey", "email": "sodales.at@quis.net", "about": "mi felis, adipiscing fringilla, porttitor", "title": "Mr." }, { "id": "8A3A6AF5-225D-D812-ABB0-3668D27F677F", "name": "Blaine", "email": "suscipit.est.ac@aclibero.ca", "about": "lorem eu metus. In lorem.", "title": "Mr." }, { "id": "8B7A6266-5CDD-AF5A-6C15-ECF6273A26FB", "name": "Brielle", "email": "Morbi.metus@nislQuisque.net", "about": "ullamcorper eu, euismod ac, fermentum", "title": "Dr." }, { "id": "3C1D2DF8-CB72-EF58-2B7D-DD266E54710A", "name": "Susan", "email": "rutrum@aliquet.org", "about": "mattis. Cras eget nisi dictum", "title": "Mrs." }, { "id": "1F391F0E-DE13-5089-7A92-8BA9B1264245", "name": "Brent", "email": "nibh.dolor@magna.edu", "about": "fringilla. Donec feugiat metus sit", "title": "" }, { "id": "340DCB7E-428E-EA04-E394-513893AE2E56", "name": "Cally", "email": "Cras.lorem@eunullaat.net", "about": "nunc. In at pede. Cras", "title": "" }, { "id": "C061F9A3-EC77-6B24-E0A4-218134EA240E", "name": "Edan", "email": "vel.mauris@sed.ca", "about": "sit amet orci. Ut sagittis", "title": "Ms." } ] ;

Con este ejemplo vamos comenzar nuestra practica. En la variable json estamos asignando un arreglo de objetos donde cada elemento del arreglo es un objecto con la siguiente estructura :

{ 
"id": "18741DB9-B869-B378-8624-0B9F593F84BA",
"name": "Ross",
"email": "lobortis@arcuetpede.ca",
"about": "nisl. Quisque fringilla euismod enim.",
"title": "Mr." 
}

En total hay 10 elementos en nuestro arreglo , con la misma estructura pero con diferente datos a simple vista no puede parecer mucho pero ahora imagina este arreglo pero de 200 elementos que fueron devueltos de una consulta a alguna BD.

Ahora vamos a ver algunos métodos , no voy explicar las definiciones estas las puedes revisar en la pagina oficial solo comentare algunas ideas de como usarlos :

each : Puede usarse para realizar operaciones por cada elemento del arreglo ejemplo :

_.each( json , function(element){ console.log(element.title + element.name) });

El resultado de esto sera :

Mr.Ross Ms.Bruno Mr.Audra Mr.Kelsey Mr.Blaine Dr.Brielle Mrs.Susan Brent Cally Ms.Edan

Has notado lo simple que fue iterar en cada elemento del arreglo y concatenar 2 propiedades de el mismo en una sola linea de codigo ? Si no usaramos underscore.js para hacer esto tendríamos que usar un ciclo FOR que nos tomaría fácilmente mas de 4 lineas de código.

map: Lo podemos usar para para extraer solo las propiedades que nos interesan de cada uno de los elementos del arreglo . ejemplo:

_.map(json, function(element){ return {"name": element.name ,"email" : element.email } });

El resultado sera un arreglo de 10 elementos donde la estructura de cada elemento es la siguiente :


{
email: "lobortis@arcuetpede.ca"
name: "Ross"
}

Aquí solo hemos extraído los datos que necesitábamos de todo el conjunto original.

find : Podemos usarlo para encontrar un elemento en especifico que necesitemos . ejemplo :

_.find(json, function(element){ return element.id == "8A3A6AF5-225D-D812-ABB0-3668D27F677F" });

El resultado sera :

{
id: "8A3A6AF5-225D-D812-ABB0-3668D27F677F",
name: "Blaine", 
email: "suscipit.est.ac@aclibero.ca", 
about: "lorem eu metus. In lorem.",
title: "Mr."
}

filter : Se usa para filtrar los resultados según una condición , por ejemplo si queremos saber cuales son los elementos del arreglo que tienen "Mr ." en la propiedad title. ejemplo:

_.filter(json, function(element){ return element.title == "Mr."; });

El resultado sera un arreglo de 4 elementos donde cada elemento tiene "Mr.s" en la propiedad title.

some : podemos usarlo para saber si existe algun valor en especifico esta presente en los elemento , ya que este metodo devuelve true si es encontrado. ejemplo :

_.some(json, function(element){ return element.name == "Brent" })

El resultado sera : true.

every : puede ser usado para saber si todos los elementos del arreglo son del tipo "Mr." ejemplo :

_.every(json,function (element) { return element.title == "Mr." });

El resultado sera : false por que en nuestro arreglo tenemos "Mr." y "Ms." presentes.


groupBy : Usado para agrupar colecciones de objetos, ejemplo :

var data = ["a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "a10", "a11", "a12", "a13"];
var n = 3;
var lists = _.groupBy(data, function(element , index) {
                            return Math.floor(index/n);
                    });

El resultado sera: Un arreglo donde cada elemento es una coleccion de 3 elementos.

sortBy : Usado para ordenar arreglos en order ascendente  

_.sortBy([3, 2, 1, 4, 6, 5], function(num){ 
return num; 
});
 
El resultado sera : [1, 2, 3, 4, 5, 6]

Si quieres hacerlo en order descendente solo tienes que usar metodo reverse del objecto array()

_.sortBy(that.currentSession.players, function(player){ 
return player.points; 
}).reverse();

uniq : usado para remover objetos duplicados de un arreglo

var data = [{'name': 'Amir', 'surname': 'Rahnama'}, {'name': 'Amir', 'surname': 'Stevens'}];
 
 _.uniq(data,false, function(element){ return element.name; }); 


 Hasta aquí he cubierto el uso básico de Underscore.js , te recomiendo que leas la documentación para saber que otras cosas puedes hacer con el como usar los templates y encadenar métodos espero haber aclarado un poco el uso de esta libreria

Link : http://underscorejs.org/