Jun 21

My Workspace

Reading time: 2 – 2 minutes

Aquest és el meu entorn de treball a dia d’avui, de fet, he volgut mostrar-lo perquè volia provar de fer una petita integració entre jquery-notes i wordpress. Ja que jo diria que malgrat aquesta funcionalitat és típica de flickr quan s’exporten imatges des d’aquest sistema al nostre blog les notes de la imatge es perden. Així doncs, he pensat que era una bona idea tenir el meu propi sistema de posar notes a les imatges.
La cosa ha estat senzilla només:

  • he creat un directori al servidor del blog on he posat el jquery-notes, jquery-ui i jquery he posat els permisos corresponents als directoris.
  • he modificat les headers del wordpress perquè incloguin el codi de jquery-notes, jquery-ui i jquery. A més del CSS propi del jquery-notes i un petit script per declarar el comportament de jquery sobre la classe “jquery-note”.
  • després al crear un article amb la imatge i afegir-li la classe “jquery-note” automàticament s’afegeixen les notes que li he posat a la imatge.
  • per posar-li notes a les imatges calen els paràmetres corresponents al script afegit a les headers del wordpress.

UPDATE: casualment avui al blog: freelance switch han pubilcat un article amb diversos workspaces.

Apr 16

long polling amb jquery+jsonp+couchdb (cross domain suportat)

Reading time: 6 – 9 minutes

Porto mesos somiant amb fer la prova de concepte que explico en aquest article, intentaré descriure en que consisteix però ja aviso que la cosa és un pèl complicadilla.

Funcionalitats requerides:

  • long polling: l’objectiu és rebre els canvis d’una base de dades de couchdb en temps real sense haver d’anar preguntant si hi ha canvis, sinó que aquest s’envien cada vegada que es donen de forma automàtica.
  • A través de jQuery el que vull és actualitzar una pàgina web de forma asíncrona, de forma que els nous resultats que vagin entrant a la BBDD es vagin mostrant en temps real a la pantalla.
  • JSONP, és una tècnica que ens permet rebre la sortida JSON de CouchDB i després cridar una funció de callback de JavaScript. El problema és que la funció jQuery.getJSON() original de jQuery té algunes mancances que gràcies a el plugin jQuery-JSONP podem solucionar, aquestes són: (copy/paste de la web del plugin)
    • error recovery in case of network failure or ill-formed JSON responses,
    • precise control over callback naming and how it is transmitted in the URL,
    • multiple requests with the same callback name running concurrently,
    • two caching mechanisms (browser-based and page based),
    • the possibility to manually abort the request just like any other AJAX request,
    • a timeout mechanism.
  • CouchDB és una base de dades NoSQL basada en documents que és capaç d’emetre una senyal (trigger) cada vegada que el contingut d’una base de dades canvia. Per més informació sobre el tema es pot consultar a: CouchDB: The Definitive Guide al capítol Change Notifications.
  • Cross-domain: quan es llença una petició XmlHttpRequest (la base del AJAX) amb JavaScript tenim la limitació de només poder-ho fer sobre el domini que serveix la pàgina web, cap altre port ni subdomini. Obviament tampoc un altre host. Per saltar-se aquesta restricción és quan cal recorrer a JSONP.

La prova de concepte ha estat crear una base de dades anomenada: notifcations on es guarden documents que són notificacions a mostrar a la pàgina web.

Després he programat la següent web:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jsonp-1.1.4.js"></script>
<script type="text/javascript">
function longpoll(since) {
    var url = "http://IP_COUCHDB_SERVER:5984/notifications/_changes?include_docs=true&feed=longpoll&since="+since+"&callback=?";
    console.log("since="+since);
    $.jsonp({
        "url":url,
        "success":function(data) {
            //console.log(data);
            since=data.last_seq;
            try {
                console.log(data.results[0].doc.msg);
            } catch(err) {
                console.log("error:"+err);
            };
            longpoll(since);
        },
        "error":function(msg) {
            //console.log(msg);
            console.log('capturat error');
        }
    });
};

var url = "http://IP_COUCHDB_SERVER:5984/notifications?callback=?";
$.jsonp({
    "url":url,
    "success":function(data) {
        //console.log(data);
        longpoll(data.update_seq);
    },
    "error":function(msg) {
        console.log(msg);
    }
});
</script>
</head>
<body>
cos
</body>
</html>

El codi és força simple de seguir, primer de tot es carreguen les llibreries: jQuery 1.4.2 i jquery-jsonp 1.1.4, ambdues necessaries per cridar el métode $.jsonp que és el que realment farà la feina.

A continuació es declara la funció longpoll que té com a paràmetre el númeral que indica quin ha estat el últim canvi a la base de dades. Aquest s’utiliza per construir la petició que es fa a CouchDB:

var url = "http://IP_COUCHDB_SERVER:5984/notifications/_changes?include_docs=true&feed=longpoll&since="+since+"&callback=?";

La URL el que fa és demanar el següent:

  • els canvis (_changes)
  • incloent els documents que han canviat (include_docs=true)
  • tracta la petició com a long polling (feed=longpoll)
  • mostra els canvis des de la versió X (since=X)
  • quan enviis els canvis fes una crida a la funció de callback definida aquí (callback=?)
    • ‘?’ és substituit per jquery-jsonp per la funció anomenada ‘C’, aquest nom es pot canviar usant paràmetres en la declaració de $.jsonp() que ve a continuació

Els missatges de l’estil ‘console.log()‘ són per tenir un seguiment del que va passant a la consola de javascript del navegador.

$.jsonp() té força paràmetres possibles definits a la API, però en aquesta prova de concepte només uso ‘url’, ‘success’ i ‘error’. El primer esta clar que és, els altres dos són les funcions a cridar quan l’acció va bé o malament respectivament. Dins de la funció posem el codi referent a les accions que volem fer, per exemple, actualitzar la pàgina actual. Com que això només és una prova de concepte el que faig és mostrar missatges per consola i llestos. La part més important és fixar-se que quan la cosa ha anat bé es fa una crida a ella mateix de forma que la cosa no acabi mai. De fet quan hi ha un error es podria també fer una crida a si mateix perquè no pares de provar de llençar la petició un i altre cop, però el que he fet per provar eś que es notifiqui a la consola de javascript i prou.

Fora de la funció longpoll el que es fa és una petició JSONP per saber quina és l’últim número de seqüència de la base de dades, paràmetre necessari per entrar per primera vegada a la funció recursiva de longpoll.

Conclusions

Pot semblar tot una mica enravassat però diria que he simplificat el problema moltíssim, ja que fins ara havia estat teoritzant moltíssim sobre el tema. Fins que ahir i abans d’ahir vaig haver de posar-me a provar-ho a la pràctica per saber exactament com es podia implementar. Sota el meu punt de vista ha quedat tot força net i entenedor.

Pels que sou programadors de webs habitualment haureu tingut necessitats semblants així doncs espero que ús pugui ser tan útil com a mi, de fet, fa unes setmanes que estic treballant amb Tiny Core Linux montant un Quiet PC sobre una DOM de 512MB per usar-la de sistema de monitorització de les meves xarxes i les d’alguns clients, espero que d’aquí uns mesos pugui donar-vos més informació del projecte.

Sep 20

Imprimir color de fons en una taula HTML

Reading time: 5 – 8 minutes

Com molts sabreu, sobretot els que ho heu intentat. Si tenim una pàgina web amb una taula que té algún color de fons o imatge al enviar-la a la impresora aquesta no s’imprimeix. Només és possible imprimir la lletra i el contorn de la taula. Doncs bé, alguna vegada es pot tenir la necessitat que això passi. Aquí és on comença el problema i on intento explicar la solució que em van donar l’Oriol i la Sara.

La idea és per exemple, tenir una taula tan simple com aquesta:

screen.png

Gràcies al següent codi HTML i CSS. Podriem tenir la vista anterior per pantalla i el color de fons blavós que es veu a la captura del final de l’article a l’imprimir:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
	<head>
		<title>PROVA</title>
		<style media='screen'>
		<!--
		body{font-family:arial,sans-serif; font-size:12px; text-align:left;}
		.marc tr td {border-width:1px; border-style:solid; border-color:#999999;}
		.capçalera {background-color:#ABAE8A; font-weight:bolder; text-align:center;}
		-->
		</style>
		<style media='print'>
		<!--
		body{font-family:arial,sans-serif; font-size:13px; text-align:left;}
		.marc tr td {border-width:1px; border-style:solid; border-color:#999999;}
		.capçalera {font-weight:bolder; text-align:center; font-size:11px;}
		table, td {margin: 0; padding: 0;}
		td {margin: 0; padding: 0;}
		div { border-bottom: 14px solid ; border-bottom-color:#ADCEF7;}
		span {display: block; margin-bottom:-14px; float:left;}
		-->
		</style>
	</head>
	<body>
		<table>
			<tr><td class='capçalera'>
				<div><span>TITULO</span></div>
			</td></tr>
			<tr><td >
				alsjfaljfaljflask
			</td></tr>
			<tr><td >
				Salñsjfalñjfdalñskf
			</td></tr>
		</table>
	</body>
</html>

Descarregar el codi.

La taula imprimida quedaria així:

print.png

Com podeu veure el que fa el codi CSS és jugar amb les cantonades de la taula que si que s’imprimeixen, llavors els dona el suficient gruix com perquè pintin tota la capçalera i finalment col·locant el text al damunt de les cantonades perquè doni la sensació que esta al seu lloc. Un gran eginy realment, llàstima que no hi hagi res més elegant per fer-ho.

Feb 08

FireBug: complement del firefox perfecte pels programadors de webs

Reading time: 3 – 4 minutes

Pensava que la extenció web developer toolbar del firefox era la bomba, però avui l’Ernest m’ha obert els ulls. Realment el Firebug li dona mil patades. És realment impresionant. El meu no és programar web ni molt menys varallar-me sovint amb els CSS, JavaScript ni HTMLs. Però sovint quan programes aplicacions ASP una eina d’aquestes t’estalvia moltes hores de feina. Per exemple, el model de templates que usa symfony no seria precisament un model WYSIWYG. Així doncs, quan toca escriure codi pelat, el Firebug ens pot fer anar molt al gra. La veritat és que l’Oriol ho hagués agraït en algún moment en que depurava un codi JavaScript, oi Oriol?

firebug.gif

Les funcions del Firebug són tantes que fa fins hi tot mandre repassar-les, però en faré una breu llista a base de copy/paste:

  • Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
  • Inspect and edit HTML Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
  • Tweak CSS to perfection Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.
  • Visualize CSS metrics When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.
  • Monitor network activity Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.
  • Debug and profile JavaScript Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
  • Quickly find errors When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.
  • Explore the DOM The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.
  • Execute JavaScript on the fly The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities.
  • Logging for JavaScript Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.
Aug 26

Microformats – afegint semàntica a les nostres webs

Reading time: 6 – 10 minutes

Després de força temps sense veurens en persona, ahir vaig passar quasi tot el dia amb l’Ernest. Varem tenir molta feina actualitzant-nos de mil i un temes personals, professionals i de tot tius. En una de les les nostres converces va sortir el tema dels microformats. De fet, el tema em sonava però no tenia ni idea de que anava i realment ho vaig trobar molt bona idea, sobretot de cara a fer més potents a nivell semantic els nostres continguts en format xHTML.

Una petita descripció de què és això dels microformats podria ser la que donen a un bon article que vaig trobar de casualitat Add microformats magic to your site (local).

Els microformats són:

  • simples
  • basats en HTML
  • dades amb format
  • basats en formats ja existents
  • basats en pràctiques ja habituals pels creadors de continguts

l’objectiu és afegir un sentit semàntic als continguts web actuals, i permetre la millor intereacció amb serveis descentralitzats:

  • sense perdre compatibilitat amb els navegadors
  • ni les eines de desenvolupament
  • sense requerir nous coneixements als desenvolupadors

Tot això que sona tan extrany seria tan senzill, per exemple, com quan en el nostre blog ens referim a una direcció postal encomptes d’usar aquest possible codi:

<div>
<p>Oriol Rius</p>
<p>movilpoint new concept,s.l.</p>
<p>oriol@movilpoint.com</p>
<p>Passeig Ferrocarrils Catalans, 117 oficina 9</p>
<p>Cornellà de Llobregat</p>
<p>Barcelona</p>
<p>08940</p>
<p>Tlf. +34 93 470 90 80</p>
</div>

Doncs si escribissim el mateix codi respectant la sintaxis del microformat anomenat hCard:

<div class="vcard">
<a class="url fn" href="http://www.movilpoint.com">Oriol Rius</a>4
<div class="org">movilpoint new concept,s.l.</div>
<a class="email" href="mailto:oriol@movilpoint.com">oriol@movilpoint.com</a>
<div class="adr">
<div class="street-address">Passeig Ferrocarrils Catalans, 117 oficina 9</div>
<span class="locality">Cornellà de Llobregat</span>
<span class="region">Barcelona</span>
<span class="postal-code">08940</span>
</div>
<div class="tel">+34 93 470 90 80</div>
</div>

Com ja he comentat lo bo és que això serà interpretat com una vCard per les aplicacions de tercers que suportin el microformat hCard, per exemple, google, zimbra, etc.

Aug 04

aptana: eina professional per programar UI Web

Reading time: 2 – 2 minutes

aptana esta disponible per Mac, Windows, Linux i fins hi tot com a plug-in per l’Eclipse. Així doncs es tracta d’una eina que ens ajudarà a programar. Com ja posava en el títol esta orientada a la creació d’interficies d’usuari via web. Ralment és per gent molt i molt professionals, abstenir-se principiants. Ja que li treurem realment el suc quan treballem amb JavaScript, AJAX, Yahoo UI, CSS, Dojo Javascript library, etc. De fet no em declaro ni usuari de l’eina ni segurament futur usuari de la mateixa, però això no treu que després de veure els screencast que té l’eina m’hagi caigut la baba i hagi sabut apreciar la gran feina que s’ha fet per crear una eina com aquesta.


screenshot_library_project_select.png

Per si tot això fos poc es tracta d’una eina OpenSource i com ja he dit multiplataforma. L’aspecte gràfic esta molt acurat i a més suporta força navegadors per comprobar que el codi que anem programant és compatible en tots ells. Com passa en tots els projectes vanguardistes també disposa d’un blog des d’on podeu anar seguint les millores que va tenint el programa, ja que ara mateix només hi ha disponible la versió beta.