Inagurando el blog con el tema que hoy es foco en todos los medios ¡El mundial!

Desde frooit, que hicimos el diseño y la implementación del theme para la plataforma (wordpress MU), les deseamos la mejor de las suertes a este nuevo blog (idea y producción de Gauyo) y vamos a estar siguiendolo por su calidad fotográfica.

Lo bueno es que las propiedades no soportadas no son aplicadas, y aunque el diseño pierde un poco el encanto visual no se pierde los detalles graficos básicos.

Una herramienta interesante es CSS3 Please!. Es un generador de reglas, que permite ir probando en tiempo real las nuevas propiedades. Es interesante porque simplifica la tarea de generar el código para cada navegador específico.

Soporta border-radius, box-shadow, linear-gradients, rotation, rgba colors y @font-face. También agrega filtros de IE para lograr los mismos efectos visuales en IE.

Y tambien recomiendo este muy buen artículo: CSS3 Selector Explained (en inglés) sobre la nueva sintaxis para Selectores y pseudo-clases. Creo que está muy bueno poder hacer declaraciones especificas donde el selector coincida con un patrón o tenga una determinada ascendencia, descendencia o posicion en el DOM. No se porqué lo relaciono mucho con XSL y el uso de xPath.

Con esta funcionalidad se ofrece al usuario que disponga la información de manera subjetiva y a la vez tiene una oferta mas amplia de contenido relacionado a cada canal. Aunque no todo está visible en una primera instancia.

Pero más allá de la parte conceptual de las cajas, yo voy a hablar de la parte técnica que es lo que me interesa.

Desde el momento que me dijeron “Rulo tenes que hacer andar esto así” me dí cuenta que iba a ser dificil encontrar algún componente en jquery ya armado que haga específicamente eso. Y tenia que ser jquery.
Yo fui uno de los que empezó a hinchar hace bastante para empezar a usar jquery en lanacion. Cuando todo el sitio estaba manejado por la YUI de yahoo. La prueba de calidad fue canchallena. Todos se hizo con jquery desde el inicio y tuvo resultados muy buenos. A partir de ahí nos dieron el visto bueno para empezar a meterlo en lanacion, con el plan de paulatinamente reemplazar por completo a la YUI (cosa que todavía no pasó).

Volviendo a las cajas, el componente que hice se encarga de manejar la animación de las cajas al cambiar de posición con las flechitas y también la funcionalidad de colapsarlas. Tanto la caja completa que solo se cierra y se abre, como las solapas internas que además tienen la funcionalidad de abrirse al clickear una solapa y mostrar la última solapa clickeada en caso que el usuario las cierre desde el “handler”.

Además tiene la funcionalidad de “recordar” el orden de las cajas y mostrarlas como el usuario las dejó la ultima vez que las movió. Eso lo hace a través del componente jqueryui y el plugin jquery cookies

Era mas simple utilizar la funcionalidad “sortable” para volver a acomodar las cajas leyendo el orden en que las tenia que mostrar desde una cookie. Eso también le agregó otra funcionalidad que no estaba en los planes, una manera más de mover las cajas. Tomándolas y arrastrándolas desde el techo de color.

Lo que Explorer se perdió

Un “feature” que estaba pensado desde un principio, era una manera de extender las noticias en una línea (que nosotros internamente llamamos tipo4) donde con un rollover sobre la nota, se puede ver un thumbnail de la foto (si la tiene) y la bajada. El “snapshot”.
Si bien estaba funcionando todo ok hasta unos días antes de implementarlo, notamos que en todas las versiones de IE este snapshot no se veía bien. Ni siquiera en la versión 8 (donde yo pensé que habían arreglado el problema, pero no). Básicamente el problema era de css. El IE al tener un elemento con posición relativa (con un z-index) y otro dentro con posición absoluta funciona bien como cualquiera esperaría. Pero con la excepción de que ese elemento absoluto queda “encapsulado” en el elemento de posición relativa, por lo que el siguiente elemento de posición relativa en el código queda por arriba del elemento de posición absoluta. Eso pasa en todas las versiones de IE y fue mas de un dolor de cabeza con los desplegables de la navegación del sitio.
Quizá la explicación no es tan clara, pero quedará para detallarlo en otro post.

En definitiva, en todos los otros navegadores van a poder ver esta funcionalidad que a mi personalmente me parece que esta muy buena.

Aunque mi idea es poner el js con un html demo para que lo pueda usar quien lo necesite. Como estoy corto de tiempo no pude hacer el demo y lo voy a agregar pronto. No quería dejar de postear esto, porque siempre me pasa lo mismo y si pasan 5 meses, para cuando lo posteo ya es viejo. Eso es causa de la ausencia de muchos post que tuve en mente y nunca llegué a publicar.

Esta adaptación que hice del plugin original, agrega la funcionalidad de manipular banners en flash. Pero antes de hablar de la funcionalidad agregada, repaso que hace el plugin original.

El plugin wp-serve resuelve la necesidad de la que hablaba antes, pero se queda corto. Agrega al backend una página de administración de banners, donde es muy simple dar de alta, modificar o eliminar posiciones de banners, pero con la restriccion que solo permite imagenes (ya sean jpg, gif o png).
Además tambien se puede especificar una “zona” para cada banner, que vendria a ser como un nombre de posición. Luego en el theme, o en el post, donde llamemos a esa posición irán rotando los banners cargados para ese nombre. Se puede indicar la cantidad de veces que querramos que esa posición se imprima, o que sea ilimitada.

En el backend se pueden ver las posiciones cargadas con una estadistica de impresiones y clicks por cada una. Es bastante piola la verdad. Pero no permite cargar banners en flash y es ahí donde veo un gran defecto en el plugin. Y no soy el único, mi amigo nch también lo cree, ya que el fué quien me pidió que le agregue esta funcionalidad.

La funcionalidad agregada es la del soporte a banners en flash. Al igual que otros adservers el flash necesita recibir un parametro con la url adonde apuntar. Y esto es importante para el conteo de clicks. El banner no apunta directamente a la url de destino, sino que pasa por un “puente” que se encarga de derivar al usuario al destino.

Un ejemplo es el banner de proyectounder que puse en el sidebar.

Para usar el plugin lo puede descargar de aquí. Las instrucciones de uso, las dejé como en el plugin original y agregué una descripción en la página del backend del código a agregar en los banners en flash.

Descarga: adserve-flash

A más de 1 mes de estar en línea, superó todas las expectativas en cuanto a  performance lo cual se traduce a costo. La capa visual generada con xml y xsl está funcionando muy bien, sumado al módulo de cache, genera un consumo muy bajo de los recursos del server . Casi igual a si estuviera sirviendo todos htmls estáticos.

Otra cosa que empezamos a notar, es que el framework se hizo “muy amigo” de google. Leegando a indexar un total de 23.800 urls del sitio en lo que lleva online, casi el doble de la versión anterior que estuvo en línea mas de 3 años.

Otro módulo que se agregó para este sitio fué el de analytics, para la generación de los rankings de notas, videos, playlists y discos. Así el manejo de estadísticas se canaliza directamente por google y sacamos esa carga a la base del sistema.

Para el módulo de videos empezamos a utilizar el JW Player 5, para poder empezar a utilizar los videos encodeados en mp4 (los ultimos videos están en este formato) asi mas adelante podemos implementar html5 para compatibilidad con otros dispositivos como el iphone.

Se cambió la sección de artistas, para mostrar más contenido. Aprovechando el cache, se muestran artistas random (3 destacados y 12 en un listado) que van cambiando 1 vez por hora.

El sistema de registración se hizo practicamente de nuevo, manteniendo los usuarios que ya estaban registrados. Se creó un perfil de usuario, donde se puede visualizar la actividad del usuario dentro del sitio, como ser comentarios, publicación de eventos o avisos clasificados. Además ahora los usuarios registrados, pueden cargar un avatar para ser reconocidos en cualquier parte del sitio donde interactuen.

También se mejoró la agenda y sigue en etapa de mejoras. Porque es una de las cosas que mas tráfico genera al sitio.

Aunque para este desarrollo, el framework esta “tuneado” se crearon modulos especificos de la aplicación. Se hace evidente la flexibilidad que tiene y estamos ansiosos de ponerlo open source para que otros desarrolladores lo utilicen y nos ayuden a mejorarlo y agrandarlo!

Otro sitio que tambien esta funcionando con el framework es lugares de viaje. Que al igual que proyectounder tiene desarrollados módulos especificos de esa aplicación.

——–

Para el framework que estoy armando, necesito poder enviar emails ya sea de una transformación xsl o si el sistema encuentra un error (mostrando una pagina user friendly en el front y el detalle del error me lo envia por email).

Para lograr que el ambiente de desarrollo sea lo mas identico posible al productivo, es necesario configurar el postfix en el Os X Leopard, para que la configuración del sistema siempre apunte al servidor donde está corriendo.

Asi, configurando el smtp de gmail, podemos tener andando los envios de mails desde nuestro servidor local.

Para que la configuración funcione, es necesario bajar y descomprimir los certificados:
https://www.verisign.com/support/roots.html

Por terminal crear la carpeta (si no existe): /etc/postfix/certs

sudo mkdir /etc/postfix/certs

Copiar y Expandir el zip bajado con los certificados ahi

sudo cp /Users/xxx/Desktop/roots.zip /etc/postfix/certs/roots.zip
sudo unzip -j roots.zip
sudo openssl x509 -inform der -in Thawte\ Premium\ Server\ CA.cer -out Thawte\ Premium\ Server\ CA.pem
c_rehash /etc/postfix/certs

Ya tenemos los certificados, ahora vamos a crear un archivo con la url smtp del server y el usuario y pass.
Para hacer esto, estando posicionados en la carpeta /etc/postfix creamos un archivo llamado relay_password

sudo vi relay_password

Esto creara el archivo vacío, donde ponemos:

smtp.gmail.com username@gmail.com:password

Mapeamos el archivo para crear un archivo .db

postmap relay_password


Chequeamos que el mapeo esté correcto con:

postmap -q smtp.gmail.com /etc/postfix/relay_password

Nos va a aparecer la dirección de email que pusimos en el archivo y el pass.

Ahora que ya tenemos todo esto, solo nos queda configurar el postfix. Para eso abrimos para editar el archivo: /etc/postfix/main.cf

sudo vi /etc/postfix/main.cf

Agregamos al final del archivo estas líneas:


relayhost = smtp.gmail.com:587
# auth
smtp_sasl_auth_enable = yes
smtp_sasl_password_maps = hash:/etc/postfix/relay_password
smtp_sasl_security_options = noanonymous
# tls
smtp_tls_security_level = may
smtp_tls_CApath = /etc/postfix/certs
smtp_tls_session_cache_database = btree:/etc/postfix/smtp_scache
smtp_tls_session_cache_timeout = 3600s
smtp_tls_loglevel = 1
tls_random_source = dev:/dev/urandom


Y guardamos.

Recargamos la configuración postfix:

sudo postfix reload

Ya podemos usar el envio de mail desde nuestras paginas en el servidor local. Si por alguna razon no se envian los mails, se puede chequear el log de mails encolados (mail queue) y ahi podremos ver que pasó.

mailq

Corriendo el MAMP en Os X, con esta opcion los desarrollos locales pueden utilizar el envio de emails. Aunque en la dirección de mail del remitente aparezca la cuenta que configuramos en el postfix, una vez en producción tomará la configuración del server, con la direccion de remitente que tengamos configurada en el sistema.

La idea es hacerlo open source, pero recien vamos a darlo a conocer cuando tengamos una version mas cerrada para que un programador php o de front end tenga todas las herramientas y documentación necesaria para adaptar el framework a sus proyectos o agregar nuevas funcionalidades. Y claro, cuando tenga un nombre.

El framework puede publicar datos en xml físicos en el servidor, para luego mostrarlos simplemente haciendo la transformación sin consultar la base. Esto es muy util para no desbordar de consultas la base cuando se tiene mucho tráfico. Tambien se puede intercalar datos de xmls estáticos con datos de una consulta a la db para generar la transformación.

Es totalmente modular, de manera que agregar o quitar funcionalidades se puede hacer solamente agregando el modulo o borrandolo del framework. Tiene un buen manejo de errores, que por configuración se pueden mostrar en pantalla o enviarse por mail, o ambas cosas.

Toda la configuración es por xml y puede ser editada desde el administrador, o a mano tocando los archivos.

Eso entre un monton de cosas más que sería muy largo de comentar en un post, pero va a estar detallado en la documentación y disponible en el repositorio de svn público.

Una version “beta” fué la que usé para el sitio de mi casamiento, que funcionó muy bien.

Seguramente dentro de poco pongo un demo online.

Ellos definen la aplicación como una conversación entre arte, ciencia, tecnología y sociedad.

Lo que mas me interesó fue como se genera la relación entre los videos, por compatibilidad semántica. La relación sale de la siguiente ecuación: p = tc / (td + tc).
Donde p es peso de la relacion, tc es tags comunes y td es tags distintos.

Via: Nacho

Esta herramienta es la primera de un conjunto de ideas con el objetivo de proponer al lector nuevas maneras de ver el contenido. Asi nació lanacion labs, que aunque no tenga un sitio donde mostrar estas herramientas, la idea es que lo tenga en un futuro cuando otras ideas lleguen a concretarse, pero por el momento siendo la unica herramienta, puede sonar un poco exagerado según Amphibia.

Yo encontré a partir de esta herramienta, una lectura del comportamiento de los usuarios dentro del sitio. Porque se puede ver claramente como los lectores de Política, Deportiva o Flashes deportivos hacen nicho en esas secciones solamente con mirar los colores y las conexiones de los globos.

La herramienta aparece en las notas que tienen “A quien le interesó esta nota además leyó:” al final y el acceso se carga cuando esta lista para ser usada.

Con esta nueva versión, no solo se hizo un cambio de look sino tambien muchos ajustes al sistema y mejoras en lo que ya estaba funcionando (y se siguen haciendo). Y aunque todavia falta, hay muchas ideas pendientes para hacerlo mas web 2.0 desde el punto de vista conceptual, ya vamos a llegar.

Entrá y descubri música nueva.

Así puedo postear en siestaviolenta desde el gTalk o desde el iphone. Solo hay que configurar que  servicio queremos usar. Y aunque recién estoy empezando a probarlo, me parece que va a ser muy útil.

Sería interesante que agregaran la funcionalidad de poder enviar contenido multimedia como videos, fotos y podcasts. Así mas alla de actualizar el estado de facebook, o de hacer micro-blogging muchos blogs (o redes sociales) podrían tener actualización al instante con mejor contenido.

El problema puntualmente fue el siguiente “The network bridge on device /dev/vmnet0 is not running”. Y aunque me funcionaba bien en NAT, yo queria que obtenga su propia IP.
Después de buscar, probar y leer un rato encontré la solución. Es una linea de comando que reinicia los servicios del vmware y vuelve a funcionar ok. El vmware tiene que estar cerrado.

/Library/Application\ Support/VMWare\ Fusion/boot.sh –restart

Este comando se tiene que hacer con sudo y password de administrador.