Posts filed under 'desenvolupament'

Halftomato.com – La nova web de contactes

Aquesta és la nova web que ahir vaig llançar amb Omatechhttp://www.halftomato.com.

Halftomato.com - Meet new people, have fun

Halftomato.com - Meet new people, have fun

Què és Halftomato?

Halftomato és una web d’Internet per a conèixer gent, fer contactes, i passar-s’ho bé. És una web totalment gratuita, on qualsevol (de moment major de 18 anys) es pot registrar. La web està dissenyada per a que sigui molt simple per a l’usuari, potenciant molt les fotos, i amb unes funcionalitats molt bàsiques: poder enviar missatges curts, públic o privats, als altres usuaris, marcar-los com “M’agrades” o “T’ignoro” i poder enviar petons virtuals. Halftomato és un lloc per a fer contactes… ok i de ligue també :-)

Què cal per registrar-se a Halftomato?

Per a poder visualitzar el perfil dels usuaris cal estar registrat. Per a registrar-se calen quatre passos:

  1. Emplenar el formulari bàsic de Nom d’usuari, password, sexe, data naixement, email.
  2. Verificar el teu email. Després del formulari s’envia automàticament un email, que cal acceptar.
  3. Pujar una foto, i seleccionar la teva cara (aquesta part és molt xula de fer! ens ha quedat de conya :-) )
  4. A través d’un mapa, indicar la teva ciutat. (aquesta part també és força sofisticada, i en menys de 15 segons, has seleccionat la teva localitat). Google Maps power!!

Aquests 4 passos és tot el que cal per tenir un perfil a Halftomato i començar a jugar amb el reste d’usuaris.

Quina informació de l’usuari necessita Halftomato i quina és pública?

L’única informació que Halftomato demana és que la teva foto principal sigui real i de la teva cara, i que el resta de fotos no siguin obscenes ni amb nudisme. No es demana en cap moment el nom real de l’usuari.

L’activitat de l’usuari a Halftomato és compartida?

No!! en tots els perfils dels usuaris es mostra les seves estadístiques de la seva activitat, però només de l’activitat que ha rebut. O sigui, pots veure el número de persones per les quals és agradada aquesta persona, quants petons ha rebut, quantes persones ignora, i per quantes persones és ignorada, el percentatge de missatges que contesta, i l’últim cop que es va connectar. En cap moment ningú pot saber l’activitat que un usuari ha fet, ni amb quines persones se’l pot relacionar.

El propi usuari té coneixment de tota la seva pròpia activitat: pot saber totes les persones per les quals és agadat i que li han enviat petons.

Em puc trobar usuaris falsos i nudisme?

No! la política de fotos de Halftomato és totalment radical. Si algú publica una foto obscena o amb nudisme, l’usuari i tota la seva activitat serà automàticament eliminada sense previ avís.

La foto principal de la persona ha de contenir sempre la cara. Si es detecta que aquest usuari no és ell, per denúncies d’altres usuaris o per utiltizar fotos de terceres persones, igualment l’usuari serà automàticament eliminat.

Halftomato funciona per a tot el món?

Sí! Halftomato està dissenyat de tal forma que una persona d’Austràlia veurà les persones australianes i properes, i algú de Barcelona, veurà només persones de Barcelona o properes. També es pot buscar persones d’una localitat qualsevol.

A qui vull destacar especialment en aquest projecte?

Evidentment a tot l’equip d’Omatech, que som tots uns màquines! i no sé com, però sempre trobem temps per les nostres coses.

En Xevi pel seu toc personal en el disseny final de la web.

El crack d’en Miquel Vaquero, perquè sense voler-ho, ens va donar l’energia necessària per empendre aquest projecte que amb en Miki ens rondava feia temps pel cap. En Miquel va començar des de zero la programació del projecte. Des d’aques blog meu et dóno l’enhorabona per la bona feina, i t’animo a seguir molt de prop Halftomato i mantenir i millorar els coneixements que vas començar aquest estiu.

I a la Laia i a la Mariona per la seva paciència, que són les que han patit més tomacades aquests 2 últims mesos. Us aviso que això tot just comença :-)

I ara què?

Doncs ara com a feina immediata és traduir Halftomato al castellà i…. el més important! que us registreu. O sigui t’animo a que probis el sistema de registre, de debó, no són més de 4 minuts:

Registra’t a Halftomato.com

Som-hi tomàquets!

1 comment 24 octubre, 2009

Extract youtube id from url

Simple tip in PHP:

function youtubeid($url) {
        $url_parsed = parse_url($url);
	parse_str($url_parsed['query'],$params);
	return $params['v'];
}

So if $url is “http://www.youtube.com/watch?v=pw2-QCXVN2s&feature=popular“, this function will return pw2-QCXVN2s, the id of video.

You can use this id to embed a Youtube video, or paint a video thumbnail: http://img.youtube.com/vi/$id/2.jpg

1 comment 9 juny, 2009

Facebook obre el seu STREAM.

A principis de Març, Facebook va posar en producció el nou disseny amb el nou concepte d’STREAM, que representa tot el fluxe d’informació. L’Stream en l’usuari se li representa en el seu perfil com el WALL, i en la home com el NEWS FEED.stream_fb

Des de la setmana passada Facebook va publicar una nova API, que permet a aplicacions de tercers de dins de Facebook o extrenes a través de FB Connect, accedir a la informació de l’STREAM d’un usuari. Aquest accés es proporciona a través de dues vies:

  1. Open Stream API: la nova API ja és descarregable a través del client de PHP i Javascript de Facebook. Disposa de mètodes per llegir totes les històries relacionades amb l’stream d’un usuari, llegir els comentaris de les històries, i l’estat de “like/don’t like”. A més a més proporciona mètodes per fer Sets: publicar una nova història, afegir un nou comentari, o votar per “like/don’t like”. Ei! i tot amb funcions per adjuntar vídeos, mp3, imatges i flash.
  2. Activity Streams: permet llegir l’stream de l’usuari a través d’una sindicació amb protocol ATOM.

Per a què una aplicació tingui accés a aquestes dades, l’usuari haurà de tenir una sessió activa i molt important, acceptar un permís adicional per a què l’API tingui accés: publish_stream (per escriure al stream) i read_stream (per llegir l'stream).

De moment l’API encara està en mode BETA, i només pots llegir l’STREAM dels desenvolupadors de l’aplicació, però aviat serà accessible per tothom. Crec que Facebook últimamemt s’està posicionament molt bé: també és notícia que aviat permetrà a usuaris amb OpenID, loguinar-se a FB.

Més informació a: http://wiki.developers.facebook.com/index.php/Using_the_Open_Stream_API

1 comment 8 maig, 2009

Tercer Facebook Developer Garage a Barcelona

El passat 16 d’Abril es va celebrar el tercer Facebook Garage per a desenvolupadors a Barcelona. Com en els anteriors Garage, aquest també ha estat organitzat per Sclipo i aquest cop patrocinat per Intel.

fb_dev_garage2

El primer Garage que es va realitzar al Juny del 2008, es van presentar aplicacions espanyoles a Facebook, i es van donar notes generals de com funciona la Plataforma per a Desenvolupadors. El segon Garage del Setembre del 2008, va ser molt més pràctic i en aquest cas jo vaig ser el responsable de fer una aplicació online des de 0 amb la Plataforma de Facebook i amb el nou disseny de perfil. Aquest tercer Garage s’ha basat íntegrament en la presentació de Facebook Connect.

Aquest Garage es va fer a les instal·lacions de la Universitat Pompeu Fabra, i es va dividir en dues presentacions que es van fer en paral·lel. Per una banda una primera presentació destinada a participants sense una base tècnica, en el que es mostrava el funcionament general de Facebook Connect  i es discutia la seva aplicació en entorns reals. La segona presentació era totalment destinada a un perfil tècnic on es mostrava una integració des de 0 d’una web qualsevol amb Facebook Connect.

Aquesta presentació tècnica la vam donar entre Brent Goldman i jo mateix com experts en la matèria. En Brent és un dels enginyers que treballen actualment a Facebook, i és un dels desenvolupados de Facebook Connect. Entre els dos vam preparar un exercici que consistia en fer un llibre de visites (guestbook), on qualsevol pot deixar un comentari pràvia autenticació contra Facebook. Aquest és el resultat de l’exercici que vam proposar:

http://xevstereyesores.net/carles/garage09/carles_dev/visitas.php

Al final de l’exercici es van assolir els següents objectius:

  1. Aprendre com donar d’alta una aplicació amb Facebook Con nect, i com fer la integració bàsica en una web externa.
  2. Exercicis amb els diferents mètodes d’autenticació, i detecció dels estats dels usuaris respecte Facebook.
  3. Com fer crides a la API de la plataforma de Facebook a través del client Javascript i el client PHP, per donar contingut social a la nostra pròpia web.
  4. Integrar Facebook Connect i el seu sistema d’autenticació i detecció d’estat amb les pròpies llibreries de servidor.
  5. Com publicar accions generades en la meva web al stream de Facebook a través de Feed Forms.
  6. Aprendre de forma teòrica com enllaçar comptes de Facebook amb comptes d’usuari de la meva pròpia web.

L’exercici el va poder implementar qualsevol dels participants del garage que disposessin d’un ordinador, tot i que van haver problemes de connexió tan a nivell Wifi com a nivell de FTP amb el servidor de proves (i és que no ha passat mai en cap workshop que no hi hagi problemes de connexió?). També l’esdeveniment es podia seguir en paral·lel via streaming de vídeo a través d’Sclipo. En total van ser més de 80 persones les presents, i més de 150 persones que van seguir la presentació a través de vídeo.

Tot el material del Garage està disponible en el següent link: http://sclipo.com/courses/view/a3710027abc3428919b5600498824643. En total són:

  • 4 vídeos
  • 11 documents (presentació i exercici)
  • Codi font de l’exercici. (Aplicació en PHP)

fb_dev_garage01

El garage va ser tot un èxit tan per l’organització, com per l’assistència, com el posterior col·loqui que es va generar després. Eren molts els presents que tenien experiència en desenvolupaments d’aplicacions amb Facebook, o bé que tenien intenció d’integrar Facebook Connect en la seva pròpia Web.Vam poder comentar al final totes les nostres experiències en un bar del Born.

Quan tornava l’endemà cap a Girona, vaig intentar fer un balanç de l’esdeveniment i treure unes conclusions de tot plegat, que llisto a continuació:

  • La plataforma de desenvolupament de Facebook tecnològicament és un 10, però a causa de la quantitat gran de continguts, actualment la curva d’aprenentatge és molt gran, i cada dia que passa n’és més, perquè Facebook té una velocitat d’evolució enorme.
  • Aquesta curva d’aprenentatge fa que els desenvolupadors que tenim la capacitat d’implementar aplicacions web amb Facebook i amb eficiència (ràpids i amb un nivell de qualitat professional) actualment siguem escassos.
  • La documentació a Facebook és bona, però malhauradament mal organitzada i distribuida. Fa augmentar la curva d’aprenentatge.
  • Cal la intervenció d’un Facebook developer o un consultor amb coneixements REALS de la capacitat de la plataforma de Faceook i la seva política d’ús per vendre un projecte a tercers.
  • Actualment Facebook està fent un gir cap a Twitter, la qual cosa comporta (seguint la tendència de fa 8 mesos), més barreres per les aplicacions dins Facebook.
  • Aquestes barreres contra les aplicacions de Facebook potencien la utilitat de Facebook Connect.
  • Facebook Connect funciona correctament però actualment planteja dos problemes:
  • Rendiment: la política d’ús no ajuda a solucionar el problema intrínsec de Connect: el contingut Facebook el va a buscar al servidor de Facebook un cop carregada la pàgina actual. La política d’ús no permet un caching de més de 24 hores.
  • Funcionalitats avançades en estat beta: La publicació a través de Feed Forms, encara planteja molts dubtes entre els developers, a causa dels constants canvis que aplica Facebook; canvis que inclús el propi Brent – enginyer de Facebook – no sabia explicar.
  • Tots aquests garages a Barcelona estan fent que es consolidi cada dia més una bona relació entre developers. Aquesta relació és el que ens ha de permetre poder crear contingut web i social de qualitat a Internet, i que tots nosaltres que dediquem un esforç diari en aprendre noves tecnologies, ens fem valdre com cal, sense competència, sino amb col·laboració. Espero que això no es quedi aquí. Per la meva part faré les màximes accions possibles per mantenir aquest contacte entre developers.

No em volia deixar, un últim comentari al respecte d’aquest Garage. Vam conèixer a Laura de Facebook, la primera empleada de Facebook a Espanya (porta uns 3 mesos)! una gran notícia perquè ens ajudarà a la promoció de les nostres aplicacions. Una noia madrilenya, fantàstica amb una il·lusió encomanadora.

Add comment 29 abril, 2009

Funcionalitat “Enviar a un amigo” il·legal

Aquesta setmana en un projecte web m’he trobat amb un obstacle. El projecte és una web que ha de generar viralitat ja que es tracta d’una campanya online.

Actualment l’eina més potent que tenim online per generar viralitat és el correu electrònic: l’utilitza tothom, i tens tots els contactes i amb menys d’1 minut pots haver enviat una informació a més de 50 contactes de cop.

És per això que amb la majoria de webs, trobem la funcionalitat de “enviar vídeo a un amigo”, “compartir enlace”, “recomendar página”. Aquestes funcionalitats generalment s’implementen en forma de formulari, on introdueixes el nom del remitent, la direcció email dels destinataris i un missatge personal. Quan fas click a enviar, un mail automàticament apareix en la bústia del destinataris.

Aquesta funció s’ha potenciat amb les APIs que ofereixen per exemple hotmail, gmail, yahoo mail, aol, que permeten importar els contactes de forma massiva des de qualsevol web.

El problema d’aquesta funció és que en l’àmbit legal espanyol aquesta acció és il·legal, segons l’article 21 de la LSSI, que resumint diu: no es pot enviar informació comercial i/o promocional per correu electrònic a persones que abans no hagin consentit aquesta comunicació.

Un búfet d’advocats ha resumit la il·legalitat d’aquesta acció amb aquest punts:

  • La información que envia en general una acció “reenvía a un amic”, es considera com una comunicació comercial i/o promocional.
  • El responsable de l’acció il·legal és el propietari del servidor de correu des d’on es generen els mails. En general el propietari, és el propietari de la web.
  • És punible perqué s’està enviant correu comercial/promocional a una persona sense previ consentiment.
  • L’aplicació web mai es pot quedar amb els emails dels amics a qui s’envia
  • Si ho denuncia un particular, són 600 € per denunciant.

Aquest tema és delicat, doncs són moltes les webs que fan ús d’aquesta acció. Quines alternatives disposem? Bàsicament 2:

  • Dir a l’usuari que reenvii la informació sense utilitzar l’eina d “enviar a un amigo”.
  • Facilitar el text a l’usuari, per a què el pugui copiar i faci ús del seu propi gestor de correu.

El que estar clar, és que aquest article 21, és un fre important per a les accions virals, i això provoca que els consultors en usabilitat i viralitat web, hauran de trobar noves vies enginyoses per promocionar i divulgar accions d’una pàgina web.

De moment poso una primera eina que ajuda i molt a la divulgació d’una forma totalment legal. Un botó de compartir, que el pots trobar a http://www.addthis.com/, i permet compartir un enllaç o una pàgina a través de Facebook, iGoogle, Digg, etc…

1 comment 6 novembre, 2008

Codificació UTF-8 per a Outlook utilitzant comanda mailto

Un petit truc ràpid que poso en el blog.

Microsoft Outlook té problemes amb la codificació UTF-8. Aquest fet és notori quan des d’una web fas ús de la comanda “mailto” en un enllaç per a què se t’obri directament el gestor de correu.

Si tens la web codificada en UTF-8, tindràs problemes si el teu gestor és l’Outlook. Caràcters amb accents o “ñ” o dièresis, no es veuran correctament. El truc és utilitzar les llibreries de conversió en PHP ‘iconv’.Amb aquesta funció pots passar una cadena de UTF8 a ISO-8859-1 (que si interpreta outlook).

Així que si programes amb PHP amb codificació UTF-8, i utilitzes “mailto”, et pot anar bé aquest codi:

$subject = “El meu assumpte té un accent.”;

$subject_mailto = rawurlencode(iconv(‘UTF-8′,’ISO-8859-1′,$subject));

echo ‘<a href=”mailto:desti@test.com?subject’.$subject_mailto.’”>enviar mail</a>’;

Add comment 6 novembre, 2008

Exposició Mundial de Figures Històriques, Girona World Expo 2008

Aquesta setmana se celebra a Girona la World Expo 2008. Aquest és el principal i més important esdeveniment de l’any i d’arreu del món per a totes les persones professionals i aficionades al món del modelisme i el miniaturisme històrico-fantàstic.

La World Expo és un concurs a nivell mundial on qualsevol persona, professional o simple aficionat, pot participar amb les seves pròpies figures. El concurs es divideix en diferents categories i nivells, així que per exemple un pot participar amb figures de temàtica fantàstica, amb figures històriques, amb maquetes de vehicles, avions d’època i altres. Aquestes figures seran puntuades per un jurat format per especialistes de cada categoria.

Tothom pot visitar l’exposició sense haver de concursar. Està oberta al públic els dies 6, 7, 8 i 9 de Juliol. Durant aquests dies a més de poder gaudir de l’exposició de totes les figures de concurs, es faran tallers per a conèixer aquest món, xerrades i conferències d’experts mundials, espectacles, etc… Val la pena, jo he quedat fascinat del què es capaç de fer una persona amb les seves mans amb un figura de plom de 75mm. Impressionant.

Jo no sóc aficionat en aquesta matèria però per temes professionals sí estic vinculat en aquest esdeveniment. He tingut la fortuna de conèixer el club “El Baluard“, que són els resposables de l’organització de la World Expo. És un projecte que des que me’l van plantejar, des d’un bon inici ja em va atreure, pel seu repte tècnic i per l’agradable entorn de treball.

Sóc responsable de l’implementació del software que gestiona tot el concurs. L’aplicació consta de tres zones:

  • Zona pública: és la zona d’inscripcions online. Des de fa dos mesos qualsevol persona ha pogut inscriure’s online a: www.elbaluard.net/concurs/. Des d’aquí cada concursant tenia accés a la seva zona privada, des d’on podia insertar les seves figures, omplir el seu full d’inscripció i fer el pagamnt de la inscripció a través de la passarela online de La Caixa “Cyberpack”. Aquesta part té suport multillenguatje per a 4 idiomes.
  • Zona privada: és la zona privada des d’on el Baluard controla les diferents inscripcions, la gestió de jurats, la gestió de puntuacions durant el concurs, el control de tot el concurs, la inserció de les fotos de les figures, i la gestió i assignació de premis. Des d’aquesta zona es genera automàticament una presentació en Flash, on presenta per Categoria, i de forma que es pugui visualitzar en un auditori, la classificació del concurs.
  • Zona de jutges: un cop tancades les inscripcions el jurat disposa d’una zona web privada, a on se’ls presenta totes les figures a puntuar. Aquest sistema està programat de tal forma que és compatible per a navegadors de dispositius mòbils, com telèfons mòbils o smartphones, que es conecten amb Wifi. D’aquesta forma, el jutje es pot desplaçar per l’exposició caminant, analitzar amb calma la figura, i puntuar a la vegada la figura, a través del dispositu mòbil.

Per a la World Expo s’estima una participació de més de 1000 concursants – actualment online ja n’hi ha més de 700 inscrits – i unes 6000 figures participant. L’organització per gestionar aquesta quantitat gran de persones i de figures és vital. Cal tenir en compte que aquestes figures s’han d’etiquetar per a ser puntuades, per a ser identificades, fotografiades, perfectament localitzades, etc… Per això el programa té punts d’integració per imprimir etiquetes amb codis unívocs de figures, compatibles amb lectors de codi de barres.

Demà dimecres fem la instal·lació de tot el sistema al Palau de Fires de Girona. Anirà tot molt bé, segur. Dijous a la tarda rebrem ja a tots els concursants i començarà llavors 4 dies frenètics.

Més informació a www.elbaluard.net

Add comment 1 juliol, 2008

Catalunya és alguna cosa més

Aquest mes de Juny s’ha estrenat la web www.catalunyaesalgomas.com que és el nucli central de la campanya publicitària d’estiu que està fent Turisme de Catalunya. La web ha estat publicitada a molts programes televisius d’àmbit estatal com Passapalabra o el Hormiguero, i durant espais publicitaris claus com durant el Gran Premi de motos de Catalunya.

Presento aquest projecte, perquè el disseny i la implementació tecnològica l’ha feta Omatech, i jo n’he estat un dels principals col·laboradors.

El missatge de la web és molt clar: Apropa’t a Catalunya que es alguna cosa més. Està presentada en català i en castellà, i la web es divideix tecnològicament en dos zones: zona flash i zona php.

En la zona flash, es presenten 3 mons: Natura, Platja i Ciutat, on apareixen unes fotos, i quan hi recorres amb el mouse, literalment aquella zona de la foto se t’apropa com amb un efecte Zoom, potenciant el lema de: Apropa’t a Catalunya. Tècnicament aquesta part Flash està molt ben resolta i és un efecte molt innovador, que encara no he vist en altres sites.

La zona PHP és on l’usuari té més participació i es divideix en tres part:

  1. Zona promoció: és una on l’usuari pot apuntar-se en les promocions que Turisme Catalunya presentarà aquest estiu: Sorteigs de Setmanes Fantàstiques.
  2. Vacances a mida: a través de selectors, l’usuari pot escollir les seves destinacions preferides.
  3. Catfoto: l’usuari pot pujar les seves fotos de vacances, comentar-les, i enviar-les com a postals a altres usuaris.

La meva col·laboració ha estat en la implementació i programació de tota la Zona Php i la integració amb el zona flash. En els formularis de la zona Php, és on he fet ús del plugin Jquery d’upload form.

Un projecte on he disfrutat per la forma de treballar, per la intensitat que hi hem posat tots durant aquestes setmanes, i per comprobar un cop més que rematar un projecte per ser el màxim de rigurós i professional porta temps, i molt! El resultat finalment és molt satisfactori, i així el client ens ho ha volgut transmetre.

Add comment 14 juny, 2008

Upload de fitxer amb Ajax: jquery.forms

Amb el projecte de picsore ja em vaig plantejar fer un upload de fitxer utilitzant Ajax. Finalment ho vaig resoldre, sense Ajax i fent una recàrrega normal de pàgina. Vaig estar investigant una mica sobre el tema, i la solució plantejada passava per l’invocació d’un iframe, de forma que quan es fa el submit del form es construeix un iframe que fa l’upload i el resultat ho llegeix l’Ajax. La solució era funcional però em faltava un wrapper que ajuntés aquest codi, i jo no comptava amb el temps per desenvolupar-lo.

Finalment, aquest wrapper l’he trobat amb un dels plugins de jquery, els jquery forms. Aquest plugin de jquery l’he trobat de molta utilitat, perquè amb un sola invocació d’una de les seves funcions: ajaxSubmit o ajaxForm, ja et fa tota la crida en ajax, i el millor suporta l’upload de fitxers, que fem una mica de hacking pel codi, és clar que utilitza la tècnica de l’iframe. L’he probat, he tardat 2 minuts en fer-lo funcionar, l’he integrat amb el cakephp , i s’ha convertit ja amb una llibreria bàsica pels meus formularis web.

La validació del cakephp 1.2 més la facilitat del plugin jquery.form, han fet que els meus formularis siguin molt i molt potents en el mínim de temps.

Espero que aquest plugin sigui un pas més per a la migració del helper d’Ajax de cakephp basat amb la llibreria Prototype a Jquery.

1 comment 23 maig, 2008


Categories

Entrades recents

Blogroll

Arxius

Etiquetes

accés remot ajax benvinguda cakephp chiquilicuatre comunicació concurs crossloop estrelles eurovisión Eyesores eyesoreworld Facebbok Garage Barcelona Facebook Facebook Open Plataform forms fotografia greenbow Grow Together hamachi incidència Intermón Oxfam ipsec jquery jquery.forms linux Omatech openswan perra presentacio Product Pulse projectes psk roadwarrior rodolfo rodolfo chiquilicuatre Sant Julià de Ramis Sclipo sistemes suport telecobàsquet uploads vhost vnc zyxell vpn client