La importància de la Microdata

D’ençà de la seva sortida, la cinquena versió del llenguatge bàsic de la World Wide Web, HTML5, es presenta com una estructura web molt més sintàctica i, per tant, més accessible alhora que SEO. No ens posarem a descriure les noves incorporacions ni aquelles que han quedat obsoletes. L’objectiu d’aquesta entrada és la de centrar-nos en una de les noves particularitats que semblen ser prometedores pels motors de cerca, la microdata.

Què és la microdata? Ho podríem definir com un tipus d’especificació HTML5 que permet contenir elements relacionats semànticament i ordenar-los segons la seva tipologia. O dit d’una altra manera, seria com tenir un arxivador amb diferents tipus de dades sobre una pàgina en concret. Per exemple, podríem tenir la secció del ‘Qui som’ amb el nom de l’empresa, els seus components (noms, càrrecs, correus personals, telèfons de contacte…), la direcció de l’empresa i qualsevol altra dada que volguéssim arxivar, així com la seva geolocalització (útil si la cerca es fa des de maps.google.com). D’aquesta forma, quan els robots de cerca entréssin a la pàgina, trobarien un conjunt d’informació ja catalogada i ordenada. Per tant, si intentéssim buscar el nom de l’empresa en qüestió o qualsevol de les dades indicades, el resultat de la cerca ens donaria una cosa similar a aquesta:

Per suposat, podem tenir multitud de dades, no només aquelles que fan referència als propietaris o integrants de la web, sinó també les referents a productes (ja siguin objectes com llocs on ofereixin algun tipus de servei).

Posem el cas de què la nostra web disposa d’una botiga online. Cada producte disposa d’un conjunt de valors tals com la valoració que li poguem donar nosaltres, o la que li donguin els nostres compradors, una fotografia del producte, una descripció o fins i tot la valoració de diferents característiques (durabilitat, estabilitat, resistència, etc.).

Aquest tipus de classificació de la informació és aplicable, no només a productes o persones, sinó també a locals (per exemple, restaurants o cinemes) i fins i tot a esdeveniments. D’aquesta manera podríem donar un sumari, una URL que ens portés a on hi ha els detalls de l’esdeveniment, la localització, la data d’inici i final, duració…  En definitiva, la classificació de la informació passa a convertir-se en un punt tant o més important que una bona imatge descriptiva de l’article, ja que permet que l’usuari tingui el resultat de la cerca fins i tot abans d’entrar a la pàgina.

Per a tots aquells qui vulguin trobar quins tipus de microdata hi ha i com s’anomenen, aconsello una de les millors webs tutorials sobre HTML5 que parla del tema: Dive Into HTML5.

Efectivitat en la correcció de websites

Fa poc em vaig assabentar, gràcies a la Nuria, d’una aplicació online que permetia “incrustar” comentaris a una web.

Bounce és una forma “divertida i fàcil de compartir idees d’un website”. En la seva pròpia descripció, es destaca el fet de poder crear notes amb un “click and drag“, i compartir aquesta pàgina amb apunts amb qualsevol “amic o enemic”.

Amb una interfície simple i intuïtiva, només cal que escrivim la URL del website a www.bounceapp.com, cliquem a “grab screenshot“, i comencem a revisar i comentar. Un cop se’ns carregui la pàgina, podrem posar-li un títol (menú superior), logejar-nos i, al finalitzar, guardar la nova URL amb tots els comentaris fets (al menú superior, botó “save“).

Extremadament útil per l’etapa de revisió d’un projecte web. Només caldrà entrar a una web online (en entorns de treball on ja es disposi de Subversion, recordeu que disposeu d’una URL pública que us pot servir per aquesta aplicació), i començar a entrar comentaris i revisions. Així, amb l’ajuda d’una wikipèdia o similar, només caldrà apuntar la URL que Bounce ens proporciona, i el desenvolupador encarregat a corregir-ho podrà tenir tots els apunts in situ. Simple, ràpid i eficàç.

Interfície de treball de l'aplicació online Bounce

CSS específics per a cada navegador

Fa temps, l’única forma que hi havia per poder fer dissenys web visibles per a tots els navegadors era mitjançant “hacks” en css. El problema era que navegadors antiquats com l’ie6 tractaven elements com els margins o paddings de forma diferent. Per exemple, duplicant les mides (10px de padding es podien convertir en 20px), no acceptant la propietat :hover excepte per les etiquetes d’enllaç <a>, o fins i tot tractant les mides amb la seva pròpia interpretació dels píxels.

La solució a aquest handicap era la d’utilitzar hacks (faltes d’ortografia) que només els navegadors d’Internet Explorer vells detectaven i acceptaven com a preferents. Així, si posàvem un asterisc (*) davant d’un element (ja fos un tag html o una id/classe creada per nosaltres) l’ie7 el detectava i aplicava, mentre que els altres navegadors el saltaven veient-lo com un error de codi. En canvi, si volíem especificar algun valor només per a l’ie6, utilitzàvem un guió baix (_). El problema d’aquestes faltes ortogràfiques és que no obtenen la validació del codi, pel que si el que busquem és una pàgina validable i un codi net, aquesta no és una bona opció. Clar que també servia realitzar fulles d’estils úniques per a aquests dos navegadors mitjançant <!--[if ...]> <![endif]-->, si bé resultava una tasca més laboriosa.

Fa cosa d’un mes, vaig caure en una solució a l’etern problema del maquetador i els navegadors que ja s’estava utilitzant en un gestor de continguts i que també podria ser aplicable per a una web estàtica i/o dinàmica. Per què no utilitzar un script que detectés el navegador visitant i que, alhora, el classifiqués amb una classe concreta inscrita a l’etiqueta <body>? Així, sempre es podria incidir sobre el comportament del navegador sense haver de recórrer a cap tipus de hack no validable. La resposta era un JQuery molt senzill i perfectament configurable.

Tot i que cada cop més s’està restringint més la validació per a l’ie6 d’ençà que Google i YouTube es van negar a continuar donant-li suport, aquesta solució no només pot estalviar hacks i canvis d’estructures, sinó que a més ens pot permetre la personalització de dissenys segons navegador i versió i, fins i tot, Sistemes Operatius.

// Observa quin navegador és i li afegeix la classe que li definim al body
$(document).ready(function(){
var userAgent = navigator.userAgent.toLowerCase();
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
// És una versió d'IE?
if($.browser.msie){
$('body').addClass('ie');
// Afegim el número de la versió
$('body').addClass('ie' + $.browser.version.substring(0,1));
}
// És una versió de Chrome?
if($.browser.chrome){
$('body').addClass('chrome');
// Afegim el número de la versió
userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
userAgent = userAgent.substring(0,1);
$('body').addClass('chrome' + userAgent);
// Si és Chrome, JQuery pensa que és Safari, així que li hem de dir que no l'és
$.browser.safari = false;
}
// És una versió de Safari?
if($.browser.safari){
$('body').addClass('safari');
// Afegim el número de la versió
userAgent = userAgent.substring(userAgent.indexOf('version/') +8);
userAgent = userAgent.substring(0,1);
$('body').addClass('safari' + userAgent);
}
// És una versió de Mozilla?
if($.browser.mozilla){
// És Firefox?
if(navigator.userAgent.toLowerCase().indexOf('firefox') != -1){
$('body').addClass('firefox');
// Afegim el número de la versió
userAgent = userAgent.substring(userAgent.indexOf('firefox/') +8);
userAgent = userAgent.substring(0,1);
$('body').addClass('firefox' + userAgent);
}
// Si no, ha de ser una altra versió de Mozilla
else{
$('body').addClass('mozilla');
}
}
// És una versió d'Opera?
if($.browser.opera){
$('body').addClass('opera');
}
});

Amb això només caldrà que afegim el canvi que vulguem a la fulla d’estils i ens ho aplicarà de forma preferent pel navegador especificat. Per exemple:
.nom-de-la-classe { width:200px; }
.ie6 .nom-de-la-classe { width:250px; }

S’ha acabat duplicar fulles d’estils i escriure hacks!

Time management & Co

S’acaba l’any i entrem a les desenes del 2010. Hi he estat donant voltes sobre algun tema del què parlar, i al final m’he recordat d’un post que tenia pendent d’acabar. I què millor que un bon llistat de programes per controlar el nostre temps ara que ens trobem enmig de festes i de dies feiners intercalats entre galets i canelons?

Més d’una vegada ens haurem trobat amb la necessitat d’organitzar el temps i un dels principals problemes que trobem és la complicació del recompte a final del dia. Per a tots aquells que necessiten un control acurat i el més exacte de la jornada, us deixo uns quants dels millors programes gratuïts que poden ajudar-vos a optimitzar el temps.

Que tingueu un bon any nou!

Control del temps (hores per projecte):

- Klok (Multiplataforma): petita aplicació per a Adobe Air que permet crear projectes i subprojectes i comptabilitzar el temps destinat per a cadascun d’ells. Tot i la seva simplicitat, compleix amb les necessitats d’un programa per a gestió de les hores per projecte, permetent, a més, la visualització i exportació dels temps en format Excel. L’únic inconvenient que li veig, és el fet de no poder exportar o visualitzar les hores d’una franja de temps d’un únic projecte.

- PhiTodo (Multiplataforma): personalment, un dels millors programes d’aquesta modalitat per a Windows per al control del temps ja que permet compartir les hores amb altres usuaris registrats al programa. Com l’anterior, es tracta d’una aplicació d’Adobe Air, pel que caldrà tenir prèviament instal·lat aquest programa gratuït d’Adobe. Ara bé, com a inconvenient li veig la poca manipulació de les tasques ja que en el cas d’haver-te oblidat d’iniciar el cronòmetre del projecte, no pots incloure les hores de més de forma manual.

- Harvest (Windows Vista i Mac): widget o aplicació molt simple i fàcil d’utilitzar que compleix perfectament amb la idea d’un gestor de temps. Es tracta, doncs, d’una aplicació que utilitza el suport en disc dur (en el cas de Mac s’instal·larà al Dashboard, mentre que per Windows serà una aplicació de Yahoo!), i el suport online des de la seva web. D’aquesta manera, podem controlar el temps dels projectes tant des de l’ordinador, com des de la web gràcies a la connexió via Internet que s’estableix entre les dues i que permet veure una actualització a temps real del temps utilitzat. Inconvenients: necessita Internet, de pagament.

- Toggl (Online): simple però efectiva, es tracta d’una aplicació online que permet comptar el temps per projecte. Existeix versió gratuïta i de pagament.

- Workrave (Windows i Linux): curiosa aplicació que planteja una necessitat que molts cops hauríem de tenir més present durant les llargues jornades de treball. Es tracta, doncs, d’un programa que es centra en el Repetitive Strain Injury (RSI) provocat per la falta de pauses o micropauses entre hores de feina. Workrave s’encarregarà d’enviar un avís cada cop que haguem d’aturar el nostre procés productiu a fi d’evitar lesions posteriors.

Gestió de projectes:

- Basecamp (Online): complet gestor de projectes amb força renom. Les seves funcionalitats van des de l’assignació de tasques, compartir arxius, fer un seguiment de les hores, crear planificacions i visualitzar deadlines, crear llistes ToDo, o fins i tot fer una vista prèvia de tot el projecte (arxius relacionats, comentaris o la planificació i les hores utilitzades). Excepte pel fet de què és de pagament, es tracta d’una magnífica eina per a la gestió de projectes que permet una ordenada coordinació entre equips de persones tot i no trobar-se en un mateix emplaçament físic. També disposa d’una versió reduïda si bé no tant completa per a la gestió de projectes anomenada Backpack.

- Checkvist (Online): aplicació online que permet compartir llistes ToDo amb altres usuaris o membres d’un equip. Tot i la seva simplicitat, es tracta d’una eina gratuïta que ajuda en la jerarquització de tasques i la seva discussió o modificació.

- Todoist (Online): val a dir que, com en el Checkvist, aquesta aplicació online pot resultar útil per a aquells que necessitin tenir la seva llista ToDo accessible en tot moment. En aquest cas, Todoist es presenta com una eina poc complexa que permet coordinar-se amb Gmail com una App més dins de l’aplicació de Google.

Gestió de contactes:

- Address Book (Mac): simple però fantàstic programa per a la gestió i ordenació de contactes que ens permet classificar totes aquelles dades dels contactes en una sola fitxa tals com el telèfon, la direcció o les seves comptes de correu electrònic.

- Gmail/Google Contacts (Online): en el cas de no disposar d’un SO Mac, Google també ens proporciona una bona eina per a la gestió de contactes mitjançant la creació de fitxes personals fàcilment classificables. A més, el podem trobar també com a add-on de Thunderbird, fet que el fa més mal·leable a les diferents aplicacions de correu existents.

Optimització d’accions:

- Launchy (Windows): ens obre arxius, carpetes i programes sense necessitat de buscar-los al menú d’inici. Per aquells de Mac, segurament els sonarà a Quicksilver, una fantàstica aplicació que t’estalviava haver de buscar els programes a la carpeta d’aplicacions o al Dock (molt útil per a les versions Tiger o inferior).

- Quicksilver (Mac): versió avançada de Launchy solament per a Mac. Com deia, una aplicació realment potent fins al punt de poder manipular accions d’iTunes (passar cançó, pujar volum, pausa…) o fins i tot cerca de documents. És una llàstima que amb la versió Leopard, l’aplicació nadiva Spotlight ja supleixi la funció de l’aplicació.

- Hyperwords (Online – Firefox i Google Chrome): add-on per a Firefox i Chrome que ens permet, mitjançant la selecció d’una paraula, buscar-la, compartir-la, traduir-la…

Recull de “wallpapers” interessants

Després de moltes demandes, i per a tots aquells que detesten veure sempre el mateix fons d’escriptori, us deixo un llistat de webs amb wallpapers de bona qualitat.

• www.interfacelift.com Fons varis, des de naturalesa fins a abstracte, a més es pot escollir la resolució de cada pantalla
• www.tutsplus.com Pàgina molt recomanada (sobretot pels dissenyadors), en aquest cas destacaré un recull de 40 wallpapers, algun d’ells força interessant
• www.vladstudio.com Fons a base d’il·lustració molt creativa, a més també podem trobar els anomenats wallclocks, fons d’escriptori amb hora i data dinàmica incorporada
• www.pixelgirlpresents.com Recull de varis autors que publiquen les seves obres, alguns d’ells força interessants
• www.desktopography.net Fotomuntatges amb temàtica naturalista
• commons.wikipedia.org A més de trobar interessants fotografies amb copyright de Creative Commons, la majoria són d’alta resolució i poden servir com a fons d’escriptori
• www.flickr.com Com l’anterior, podeu trobar fotografies espectaculars amb una resolució prou gran com per utilitzar-les com a fons d’escriptori
• www.abduzeedo.com Suggerida per en Samuel, wallpapers bàsicament d’àmbit d’il·lustració

Conceptualitzant el terme “escriptori”

No fa molt vaig topar amb una eina força interessant i bastant útil (o això diuen els mateixos creadors), per a tots aquells qui l’escriptori virtual és una acumulació de fitxers de tota mena i color. Per solucionar aquest caos classificatiu, existeix un software anomenat BumpTop que converteix el bidimensional “desktop” en un element de treball més pròxim al concepte mateix que el defineix: una taula amb arxius classificables segons terme, classe o fins i tot preferència (o sigui, un entorn 3D).

Us deixo el seu propi vídeo per a qui vulgui fer-hi un cop d’ull (tot i que també el podeu veure des de la seva web).

Wyzo, navegador-media

Fa poc vaig llegir una entrada sobre aquest navegador on el qualificaven d’interessant, bàsicament per les seves aplicacions integrades i la seva facultat “media” que li proporciona la qualitat d’eina de navegació adaptada expressament per aquells que més hores es tiren entre recerques, lectura i descàrregues. Literalment, Wyzo és un navegador basat en el motor de Firefox, amb la integració de descàrregues de BitTorrent alhora que una acceleració 10x de descàrrega directe, incorporació del CoolIris per la visualització de recursos de recerca/web tals com imatges (una aplicació que també es pot incorporar a Firefox), possibilitat d’utilitzar temes diferents, i una interessant barreja entre navegabilitat més atractiva (amb moviments concrets del cursor i navegació entre tabs més ràpida i visual) i un nou motor de recerca, entre altres característiques.

Per a aquells que no vulguin preocupar-se d’afegir eines al navegador a fi de què sigui més còmode en la navegació, Wyzo pot ser una bona opció i a sobre és gratuït. Personalment ja l’he descarregat, i només em falta experimentar-hi per quedar-m’hi com a usuària resident (tot i la meva estima pel navegador de la guineu).

Reunions per xarxa

Una de les eines més impulsades dins del marc de les multinacionals (o tots aquells negocis que es desenvolupin en un marc global), és el de les videoconferències. Resulta una eina interessant i molt útil que s’ha anat desenvolupant a partir del naixement de l’streaming àudio/vídeo, i que en l’actualitat pot suposar un gran respir i ajud en el correcte desenvolupament empresarial, tot i que dins l’àmbit privat també ha aconseguit fer un gran número d’usuaris.

En aquesta classe, podem trobar aplicacions diverses, més o menys completes, de pagament o gratuïtes, i fins i tot algunes amb llicència MIT d’OpenSource. Està clar que aquest tipus de suport proporciona una eina comunitativa molt útil, dins en l’àmbit empresarial, capaç de proporcionar un contacte directe entre diverses parts d’un únic projecte, reunint alhora client, desenvolupador, direcció o producció, etc.

Extret de diverses fonts, he pogut fer un recull d’informació referent a aquest tipus de recurs. Podem optar amb dos tipus de suports, que seran els que ens proporcionin l’aplicació: per software directe (diríem que és quan ens descarreguem el programa per poder-lo utilitzar), en aquest cas totes les parts necessiten tenir el mateix software instal·lat; o bé per software en base web (a partir d’una URL privada o bé amb un Log-in a la web que proporciona el servei), aquí no cal cap instal·lació, sinó que tot es fa via xarxa. Aquest mètode resulta, actualment, el més interessant de tots. A continuació us adjunto un parell de taules extretes de www.blogcatalog.com i www.masternewmedia.org respectivament.

Una aplicació per aquells que vulguin tenir una videoconferència pròpia i adaptar-la a les seves propies necessitats és TokBox. És gratuït i amb codi obert; tant podem crear-nos una compta a la seva pàgina, www.tokbox.com, des d’on ens proporcionaran un <embed> que podem personalitzar per a la nostra web, com podem descarregar l’API del TokBox a developers.tokbox.com, i personalitzar-lo a gust.

En canvi, existeixen potents aplicacions molt útils i senzilles d’utilitzar des de suport web i sense necessitat de descarregar res (ens permeten compartir arxius, participar en una conferència compartida, i fins i tot mostrar accions de desktop simultànies). D’entre tots, els millors (i gratuïts) són: PalBee, Dimdim, i Vyew.

Drupal, eina per a creació de websites dinàmics

Aquesta és la meva primera aportació al bloc, així que començaré per explicar ràpidament la plataforma CMS Drupal, una eina molt potent i útil que trobo indispensable per la creació de websites dinàmics.

Per a tots aquells que no ho sàpiguen, Drupal és una de les plataformes anomenades CMS (Content Management System), aplicables en qualsevol sistema operatiu i totalment gratuït. Es basa, doncs, en un sistema compost per diversos mòduls escrits en PHP i amb incorporació de MySQL (ja que funciona mitjançant consultes a bases de dades), i que a vegades poden contenir parts de codi en JavaScript. És a dir, és una plataforma que treballa en els servidors Apache i que permet crear weblogs (blogs en els casos més senzills de CMS com són el conegut WordPress, o el Joomla, un tant més avançat).

l Drupal es caracteritza, com els seus companys CMS, per ser una eina capaç de ser utilitzada tant per usuaris de nivell mitjà, com per desenvolupadors més avançats. Val a dir, a més, que es tracta d’un dels CMS gratuïts més complexos i complets pel ja anomenat sistema de mòduls, un conjunt de blocs de codi amb funcions molt específiques que permeten, mitjançant la seva instal·lació, realitzar diverses funcions dins el weblog com ara crear una galeria d’imatges, disposar els blocs amb informació segons es desitgi, crear un sistema de Feeds personalitzat… o d’altres més específiques com pot ser crear un sistema de classificació de paraules (tags) i visualitzar-los segons grau d’utilització.

Drupal disposa d’una xarxa d’usuaris molt extensa i documentada, cosa que la fa altament actualitzable gràcies a l’extens col·lectiu de desenvolupadors que la formen i participen. Només cal que aneu a la seva web general (www.drupal.org) per comprendre la dimensió de seguidors, desenvolupadors i dissenyadors, que composen aquest col·lectiu. A més, també existeixen agrupacions més locals, com és el cas de www.drupal.cat, ja que la plataforma permet, també, personalitzar tot el site en l’idioma o idiomes que es vulgui.

Una altra de les advantatges d’aquesta plataforma, (hem de tenir en compte que es tracta d’una eina de nivell mitjà-avançat per a desenvolupadors i dissenyadors web, si volem una plataforma per a blog més senzilla, podem utilitzar WordPress), és la creació de temes o “templates” personalitzats on, mitjançant coneixements avançats d’HTML, CSS i bàsics de PHP, podem crear una gràfica aplicable a qualsevol weblog de Drupal.

En quan a interès per a empreses, Drupal suposa una poderosa eina per a desenvolupament de websites dinàmics on existeix una actualizació de la informació continuada i amb una gran usabilitat. Redueix considerablement el temps dedicat a la construcció del site podent dedicar el temps de treball en temes més concrets com poden ser el disseny, o la creació de funcions específiques de la web.

Finalment, us deixo unes quantes captures d’exemple per a què pugueu veure la diversitat d’estils aplicables.