Categoría: Programacion
Arreglando el problema (parcialmente) de los Like de Facebook
Las redes sociales sumaron sus botoncitos para republicar/recomendar contenido en ellas mísmas pero esos botoncitos no siempre funcionan bien, más bien, apestan.
El de Twitter nunca muestra los resultados hasta tres o cuatro días después, el de Google ahora está andando mejor pero el "like" no se refleja en ningún lado, ni en el timeline de Google+ (hay que entrar en un submenú de cada usuario, WTF?) y el de Facebook venía funcionando bien hasta hace unas semanas.
¿que pasó? ni idea, definitivamente no es un error de nuestros sitios ya que sin hacer cambios por este lado comenzó a fallar, pero en tres-cuatro semanas nadie de Facebook se molestó en arreglarlo y, como siempre, en estos casos hay que recurrir a algún vericueto para solucionarlo "a medias".
Como buen Argentino siempre atamos todo con alambre y buscando por ahí encontré una forma de apaliar el tema, primero que nada el problema se parece al de un ping que no llega a destino. "algo" en Facebook identifica mal nuestra URL y por ende no accede a darle el "like".
El botón de "like" dispara ciertos mecanismos dentro de Facebook, va hasta el sitio que lo solicita, toma la url, la descarga, identifica encabezados, busca la imagen del post, la public en tu muro. Todo eso debe hacer el botoncito que como verán es mucho más que un simple botón.
El primer tip es, entonces, que la URL sea fácil de identificar para Facebook y si son de programar en PHP como yo, hay que convertirla con urlencode:
urlencode(the_permalink()); // para Wordpress urlencode($url); // para PostRev
Al menos esto solucionaría una parte del problema pero no lo es todo, el segundo son los encabezados y acá la culpa es TODA de Facebook pretendiendo que en nuestros blogs sumemos headers que no son estándar.
El Open Graph Protocol. ¿necesidad? ninguna! el HTML ya cuenta con todas las propiedades que Facebook require duplicar, algo absolutamente ridículo. Pero es así, primero es un protocolo abierto, segundo, sirve para identificar cosas, así que si queremos ser "Facebook Like" deberíamos implementarlos en el blog.
Tercero, si todo falla, hay una opción más: forzarlo. Entre las herramientas de Facebook está el URL Linter que permite cargar tu url, analizarla y "habilitarla" para Facebook. Cualquier URL que previamente fallase, la cargan en el Linter, Lint y listo, ya se encuentra "catalogada".
Ahí mísmo verán cómo te muestra los "errores" o faltantes (de ahí confirmé lo del Open Graph) y cómo ve Facebook tu blog.
Y listo, más información no sabría darles, con esto funciona aunque suele fallar también, seguramente en este blog termine implementando los headers de Open Graph al menos en una versión simplificada pero suficiente.
Frases para programadores
Como soy de los enfermos que disfrutan de programar un viernes a la noche, y cuando digo disfrutar, es que anoche tenía como opciones ver tele, masacrar gente jugando un FPS, navegar aburridamente o programar y elegí esto último.
Navegando por ahí encontré hace un tiempo esta extensa lista con grandes frases de programadores para programadores y, sepan disculpar los que no comprenden demasiado el tema, hoy tengo un post para nardogeeks de buena ley
Junté aquí las que más me gustaron, si no siempre pueden consultar la fuente que tiene 50 grandes citas.
Posts Favoritos
Funcionalidad que me pidieron hace años y siempre me dio fiaca programar.
Ahora la importé desde el código de Links de Viernes.com y pueden marcar como favoritos los posts que más le gusten.
Al pie de cada nota hay una pequeña estrellita, sólo se ve cuando estás dentro de una nota, no en la portada del sitio, allí pueden marcar o desmarcar un post que les guste.
En el menú de usuario, ya que esta funcionalidad sólo es para usuarios registrados, tendrán un link a los post marcados y allí podrán ver un listado con todo lo que les gustó.
No es la gran cosa pero al menos funciona!
Video en HTML5
Luego de leer un excelente artículo sobre estos temas me dieron ganas de escribir al respecto, al menos para probar un poco del tag VIDEO de HTML5 que tanto se ha ido mencionando en el ambiente de desarrollo web y que pocos estan usando todavía.
Justamente este post es para aquellos que utilizan un browser moderno, y cuando digo moderno me refiero a, en algunos casos, experimentales, como Fireofx 4 Beta 7 o el recientemente lanzado Chrome 8, son browsers muy nuevos y que todavía no conforman la mayoría.
Para aquellos que no entienden de que se trata, un breve repaso, hasta ahora ver un video en la web significa que el browser tiene que llamar a un plugin o aplicación externa para hacerlo, un "objeto" extraño que se mete entre el browser y vos para mostrarte algo tan básico como un video o un audio.
La adopción de HTML5 agrega dos nuevos tags, AUDIO y VIDEO justamente para suplir este hueco y que el mismo browser pueda integrar correctamente el video. En poco tiempo tendremos a Youtube con todos sus videos en WebM, el formato propuesto por ellos, pero he aquí el problema, no todos los browsers usarán el mismo codec/container para sus navegadores ¡que rompehuevos! así es, lo discutimos varias veces en el blog cuando Apple y Nokia insistieron en no definir el formato default cuando definían HTML5, así que pasamos de un draft con el OGG/Theora a uno que no dice nada sobre este combo indispensable.
Adentro del post les cuento como se puede "resolver" esto para el usuario, no para nosotros, claro 
Post Revolution 0.8.0 Alpha
¿Hace cuanto no posteo nada del PostRev en mi blog? respondo yo mismo, hace más de un año. Es que los vaivenes de la vida entre los que se incluyen: independización, matrimonio, radio, blogs, redes sociales, familia, negocios y un largo etcétera dejan poco tiempo para programar.
Pero me lo hice y si bien todavía es una versión muy primitiva como para recomendar su uso, muchos me pedían que libere el código y ahí lo tienen.
No sólo liberé el código, estreno sitio nuevo con el dominio propio, postrev.com.ar y un wiki para ir completando a medida que tenga tiempo con cada detalle del sistema.
Los más jóvenes se preguntarán ¿que es el postrev? pues bien, el Post Revolution es el sistema que utiliza este blog. Ni Wordpress ni Blogspot, acá usamos PostRev! desde 2004 es el encargado de que el blog funcione y tan mal no se portó.
Está mal programado, su código es una basura, no respeta ningún patrón, pero sin embargo tiene algo que pocos, funciona, lo hice yo y me gusta seguir cambiándole cosas cada tanto. Es mi herramienta de aprendizaje y gracias al mismo entendí que la mayoría de los bloggers no entiende cómo funciona su propio blog, algo imprescindible para un nardogeek.
Los kakers estarán de parabienes, espero que aporten código, el wiki está para ellos, para que me reporten cada cagadita del código y yo pueda arreglarla. También a futuro planeo abrir públicamente el SVN y si algún programador se quiere sumar pasando código, bienvenido sea, es 100% software libre. Obviamente, hay muchos huecos que estaría bueno cubrir, sean piadosos
Otro detalle, el diseño default que tiene es horrible, es mi intención crear uno nuevo pero se me ocurrió ¿que tal si hago un concurso para diseñadores? no tengo grandes premios todavía, más bien, tengo una cajita llena de porquerías, pero... probablemente más de un diseñador lo aprecie así que proximamente habrá concurso y los mejores diseños serán adaptados al PostRev. Lo único que hace falta es HTML+CSS, del resto me encargo yo
Para aquellos viejos usuarios del sistemita, pueden divertirse un par de minutos recordando como era, total... el panel de administración es el mismo desde hace 6 años
Como implementar el nuevo botón de Twitter
El nuevo Tweet Button es bastante fácil de implementar aunque no es perfecto. El primer y más obvio problema es que, como todo lo que viene de twitter, depende de twitter.
Si estuviésemos hablando de un servicio estable y bien implementado, es decir, separando las cosas, no habría problema, pero justo ayer me demostró que tan así no era. Durante un rato entrar a este blog fue un martirio culpa del javascript oficial de Twitter, fallaba, generaba errores, impedía navegar, hasta parecía el blog hackeado.
No, era el botón oficial y el javascript tomado de http://platform.twitter.com/widgets.js
Si ese widgets.js llega malformado o inclompleto a tu browser es probable que todo falle. Obviamente es algo que también puede suceder con el botón de Facebook (podría escribir en otro post cómo implementar ese otro ) así que cada vez que dependemos de un servicio externo a nuestro blog, si este falla, encadena el fallo hacia nuestro blog.
Por algo a veces uno prefiere que la mayor parte del código esté en un mismo lugar, para no depender de terceros. Uno podría bajarse el widgets.js e instalarlo localmente pero no vería aparecer las actualizaciones, igual, no es mala idea
El botón es muy sencillo y para crearlo tan sólo hay que entrar en la sección de "goodies" de Twitter y utilizar el wizzard para creación.
Primero elijen el estilo, yo opté por el horizontal, luego el texto a imprimir en el twitt, que puede ser el título del post, la url que vamos a compartir y por último el idioma.
Un detalle opcional es que el twitt aclara a qué usuario de la red le pertenece el contenido publicado, así pues si hacen click en el botón aquí podrán ver que el twitt resultante dice "by @fabiomb" que es mi usuario.
El código generado hay que ubicarlo en el template de tu sitio pero hay que tener en cuenta los parámetros utilizados:
- data-url es el parámetro del enlace al post, en mi caso es fácil, pero uso PostRev, no es wordpress esto así que es el enlace numerado como siempre.
- data-text es el título del post, se le puede agregar lo que uno quiera, saldrá en forma de twitt así que hay 140 caracteres disponibles menos la url simplificada por el servicio propio de Twitter
- data-via es el parámetro de quien es el dueño, aquí recomiendo tu usuario de twitter
- data-lang el idioma, "es" para español, obviamente.
En Wordpress sería fácil, the_permalink() en data-url, the_title() en data-text más lo que querramos incluír.
En PostRev sería $titulo para el título y $id_noticia para el id de la nota, digamos, en ambos casos es fácil.
Se puede utilizar la API de distintas formas, para hacerlo con un iFrame o para desarrollar el propio.
Mariano se preguntaba que harán los servicios alternativos que ya hacían esto, por lo pronto hacer uno que no se cuelgue y no te haga fallar todo tu blog es ya un punto a favor
el uptime de Twitter es una porquería
Proyecto 1 - Streaming
Pero eso no significa que me quede de brazos cruzados así que me puse a diseñar un concepto, al menos un diagrama, una interfaz y una idea como para que la haga otro. Sería algo así como "Diseño Open Source", yo lo diseño, que lo haga el que quiera, total... que problema hay con un diseño GPL / Creative Commons? ni idea.
Tampoco es que tenga una idea brillante sólo que tenía ganas de hacer una aplicación y no pude. Al que le interese, como hobby o porque vea una veta, genial, el que diga que es una bosta, también, el que tenga mejores ideas, bienvenido sea! es más un intercambio de ideas que otra cosa.
Ahora al grano, les presento la idea y un esquema de como debería ser...
Diseñador o Programador ¿quien se encarga de la maquetación?
Gracias a una consulta por mail de un lector, Dante, molesto por los avisos piden como requisito/deseable "maquetar html+css en base a un JPG o PSD" surgió un post, je, si, ya se que tengo varios mails pidiéndome que hable de tal o cual tema o sugiriéndome, pero este como me toca de cerca me pareció bueno tomarlo.
- Un buen programador no es un buen diseñador
- Un buen diseñador no es un buen programador
- Un buen maquetador tiene que ser medianamente decente en ambas tareas.
- Siempre existe un capo que es la excepción a estas reglas, lo felicito
El problema es que aquí las empresas es donde ponen un parate: prefieren un diseñador mediocre con más conocimientos de programación y exigirle un nivel profesional o un programador con buen gusto antes que pagarle a una persona extra en el esquema para tener bien maquetado algo.
Así entonces muchos diseñadores tuvieron que, de prepo, aprenderse muchas cosas de PHP o sistemas de templates y a algunos les ha ido bien aunque la mayoría sea un desastre en esto. A la vez muchos programadores prefieren aprender sobre diseño, PSDs, Illustrator y demás yerbas para evitar tener que lidiar con diseñadores prehistóricos.
Esa fusión de conocimientos es prácticamente una materia nueva que pocos reconocen pero que debería ser ya una disciplina: el maquetador.
El programador debería saber hasta el HTML y punto, el CSS debería ser área del diseñador, pero ¿y el intermedio? el maquetador le debería asignar el HTML disponible al programador y el CSS al diseñador, es la guía. Este rol lo puede cumplir cualquiera de los otros dos pero ahí volvemos a encimar funciones.
Un maquetador podría ser una persona que maneje:
- HTML
- CSS
- Conversión de PSD/Illustrator a HTML+CSS+Imagenes
- Definición de estructuras a utilizar
- Definición de complementos a utilizar (Javascript, etc.)
- Diseño de interfaz (algo inexistente pero con tanta app. web)
Seguramente se me escapa algo porque lo estoy pensando así por arriba, pero creo que se entiende, una persona que pueda darle forma a los sitios web más allá del código duro del programador que no debería estar preocupándose por la presentación y más allá del diseñador que no debería estar preocupándose en aprender un lenguaje de código.
¿o si?
Me sigue quedando la duda si este rol no es parte de lo que deberían agregar a su currícula los diseñadores y programadores ¿es necesaria la división? ¿es realmente una tarea inalcanzable? ¿o sólo una comodidad para el empleador? Valen las opiniones
En mi caso tuve que aprender los tres roles, con sus falencias claro, pero como venía del lado de la programación y aprendí a armar boludeces en HTML hace mucho tiempo es como que ciertas cosas me resultan fácil, ahora bien, sigo sin poder creer como un diseñador no sabe nada de HTML o como un programador no se actualizó y sigue usando el tag FONT
Novedades para los Links de Viernes
Cada dos o tres días tengo tiempo para escribir un par de líneas de código para el nuevo Links de Viernes. Como algunos sabrán el sistema lo voy a independizar del blog. Esto no implica que los viernes no tengan sus links de siempre, no, para nada, sólo que quiero manejarlo como un sitio aparte y que no esté tan pegado al blog así puede tener vuelo propio.
Como tal estuve trabajando en algunas mejoras, nada del otro mundo, pero si que sirven para un sitio más independizado, así que ahora les comento en que estuve trabajando y que falta para estar listo. El día que esté lo subo y emancipo del blog supongo que será antes de fin de año, je.
Mysql: actualizar un dato con una condición
Es un minitip para programadores en apuros, como siempre sirve googlear y que te aparezca un resultado, venga, hice lo mismo y correspondo con contribuir con la sociedad.
Querés actualizar un valor de 0 a 1 o de 1 a 0? una cosa que dependa de otra? por una condición? es fácil:
update usuario set negativizer = case when negativizer = 0 then 1 else 0 end where id_usuario = 1
Para darles un ejemplo, lo que hace es simplemente cambiar el valor cuando ya tiene uno y al volver a ejecutar esta sentencia lo vuelve a cambiar, ideal para valores binarios como este caso.
Se que hay otras formas pero me gustó esta de resolverlo