open-pitu, el blog lliure en català » How-to’s

Esborrar nodes del DOM en PHP

Pitu Sabadí — Tue, 30 Aug 2011 22:05:05 +0000

En alguns casos, podem necessitar a partir d’un fitxer o d’un string que conté HTML, poder-ne fer modificacions, pertinents. En aquest post veurem com carregar aquest contingut en un objecte, validant-ne l’estructura. A partir d’aquí es poden fer consultes, per a obtenir els nodes desitjats i a partir d’aquí fer-ne les modificacions corresponents, en aquest cas esborrar.

$dom = new DOMDocument;
$dom->loadHTML( $htmlString );
$xPath = new DOMXPath( $dom );

En aquest cas, el contingut està en una variable anomenada $htmlString. En el cas que volem obtenir el contingut d’un fitxer podem fer-ho amb loadHTMLFIle:

$dom = new DOMDocument;
$dom->loadHTMLFile( ‘exemple.html’ );
$xPath = new DOMXPath( $dom );

Un cop fet això si volem podem obtenir tots els nodes que siguin imatges de la següent manera:

$images = $xml->xpath( ‘//img’ );

Per a poder, en aquest cas esborrar els nodes obtinguts:

foreach ($images as $node) {
$node->parentNode->removeChild($node);
}

Un cop acabat el bucle caldria guardar el DOM a la variable o el fitxer en qüestió:

$htmlString = $dom->saveHTML();

En el cas que hi usem un fitxer podem usar saveHTMLFile. El retorn d’aquesta funció en aquest cas no és el contingut sinó el nombre de Bytes escrits:

$doc->saveHTMLFile(“exemple.html”)

Aquest mateix codi també es podria fer amb expressions regulars, i podríem obtenir uns resultats semblants, però amb un codi molt menys entenedor i més propens a bugs.

Deck.js – Presentacions en HTML5

Pitu Sabadí — Mon, 29 Aug 2011 14:31:03 +0000

Es tracta d’una llibreria JavaScript per a crear presentacions, de manera fàcil i senzilla en HTML5. Aquestes presantacions funcionen molt bé usant la pantalla completa del navegador i ens permeten l’interacció amb les fletxes del teclat.

Per a crear una presentació cal crear les diapositives. Cada una seria un div de la classe slide. Es poden definir diferents tipus de transició entre les diferents diapositives. A més, usant els plugins corresponents podem posar-hi elements de control, com serien fletxes per a canviar de diapositiva o un input per accedir directament a la que volguem.

En aquest enllaç podeu veure una presentació d’exemple on s’explica com usar de manera bàsica aquesta eina, dóna l’opció de descarregar-ne el codi i així mateix poder veure el resultat obtingut.

Es tracta d’una eina molt útil, ja que d’aquesta manera no es depèn de la màquina per a veure la presentació, ja que no s’usa ni MS Office ni OO, sinó que senzillament funciona en el nostra navegador web.

Icones de la finestra a l’esquerra a Gnome3

Pitu Sabadí — Mon, 22 Aug 2011 17:36:56 +0000

En les darreres versions, Ubuntu ens havia acostumat a tenir els icones de la finestra a l’esquerra. Personalment crec que és una elecció molt encertada, ja que normalment tenim el mousse més a prop d’aquest que a l’altra banda, de manera que és molt ràpid acostumar-s’hi i és realment útil. Gnome3, per defecte, els té a la dreta. A continuació mostrarem com col·locar aquests icones a l’esquerra i de pas, com incloure els de maximitzar i minimitzar en cas que no els tinguem (que per defecte tampoc hi són).

Per a poder realitzar aquests canvis cal tenir instal·lat gconf-editor:

$ sudo apt-get install gconf-editor

A continuació, executem el programa:

$ gconf-editor

I cal que anem desplegant l’arbre de la següent manera:

Desktop -> gnome -> shell -> windows

A continuació a button_layout en canviem el contingut per: close, maximize, minimize:

Un cop fet això: ALT+F2 i escrivim r per a reiniciar el gnome-shell i els canvis s’hauran aplicat i fet persistents per a següents execucions.

Quins altres canvis heu fet a Gnome-Shell?

Font: Aprendo Debian

Arreglar “problema” de Gnome3 amb dos monitors

Pitu Sabadí — Fri, 19 Aug 2011 14:53:32 +0000

Com ja sabeu, des de fa un dies, uso en el meu portàtil Gnome3, ja que arran de les declaracions de Linus em van venir més ganes de provar-l’ho. Realment està molt ben fet, tot i que has de canviar algunes costums que tens a Gnome2, en el meu cas posant molt d’èmfasi en els espais de treball i no en altres coses.

En aquest sentit, quan usem més d’una pantalla, com és el meu cas en determinades hores, Gnome3 ha incorporat un comportamen estrany en aquest sentit. La pantalla auxiliar, és única, i no fa respón als escriptoris, sempre hi han presents totes les que poses en aquella pantalla, independentment de l’espai de treball en el que et trobis.

Per sort, de la mà de Greg Cordts’ Blog trobem la solució a aquest mal comportament. No és necessària la instal·lació de cap extensió, sinó senzillament canviar la configuració a partir del gconf-editor. Si no el teniu:

sudo apt-get install gconf-editor

Un cop fet això:

Exteneu les carpetes desktop, gnome, shell, windows
Desactiveu workspaces_only_on_primary

Un cop fet això recarregueu (ALT+F2 i a continuacio escriure r i prémer ENTER) gnome-shell i ja ho tindreu funcionant.

OOCSS (2a part), profunditzant en els widgets

Pitu Sabadí — Wed, 10 Aug 2011 22:12:01 +0000

Avui mirarem les recomanacions a seguir alhora d’implementar els widgets, en el nostre sistema de CSS. Primer de tot, recordar que els widgets estan formats per dues parts, per una banda la pròpia del framework, i per l’altra la pròpia de cada un dels projectes. D’aquesta manera podem especialitzar tots els nostres projectes amb el seu tema personalitzat. Primer de tot cal fer una feina de detecció dels widgets, on cada un respón a una funcionalitat, creant així la nostra llibreria de widgets.

Abans de començar us deixo els enllaços que s’han usat de font:

Enllaç a la presentació.

Enllaç a la pàgina oficial.

Crear objectes reusables

Cal crear una llibreria de components reusables independent del projecte. Per altra banda, també cal crear-ne una per al nostre projecte. La idea principal recau en identificar els objectes per tal de saber-ne fer l’extensió i que sigui reusable, de manera que han de ser extensibles, reusables i aniuables.

Si per exemple pensem en un widget butó, a la part comú de tots els projectes podem definir les propietats que sabem que seran comunes, o definir-ne unes per defecte. A partir d’aquí aquesta classe cal anar-la extenent per tal de que tingui l’aspecte desitjat a cada projecte i alhora tinguem els diferents butons que es necessiten.

Simplificar la cascada

No usar #id en els estils. Si usem aquests identificadors, trencarem la reusabilitat d’aquest codi, ja que no hi poden haver diverses intàncies en una mateixa pàgina amb un mateix identificador. Així doncs, #id queda reservat per al seu ús des de JavaScript i en formularis. Així mateix queda prohibit en els estils.

També queden prohibits els estils ens línia. Tots sabem que els estils intrusius porten problemes, però a vegades els usem en moments determinats per què ens poden ser còmodes. Ja que estem reformulant el sistema d’estils, també queden prohibits, ja que a part de no ser reusables, ens poden portar a comportaments estranys, cosa a evitar totalment.

Usar classes i no elements

No hem de ment definir els propietats a div.la-meva-classe, sinó directament .la-meva-classe. Amb la primera opció fem que la propietat només sigui vàlida per a elements div, mentre que amb la segona la classe no depèn del seu element HTML. D’aquesta manera obtenim un codi més reusable i a més no ens incorporarà comportaments estranys.

Minimitza els selectors

A partir d’una classe podem definir elements HTMLS aniuats. Tot i això cal tenir en compte que a vegades ens podem estalviar selectors per a acabar tenint un mateix comportament. D’aquesta manera permetem una millor llegibilitat al codi. Amb aquest fet a més, millorem el rendiment dels nostres CSS.

Sense dependències del context

Els estils d’un objecte són independents del lloc que ocupin de la pàgina. D’aquesta manera no hem de definir .la-mevaclasse-1 .la-meva-classe-2 {…}, ja que si ho fem així estem supeditant el comportament de la 2 a que estigui dins d’un contenidor 1. D’aquesta manera a més, sabem que podem usar un widget a qualsevol part de la pàgina i que sempre tindrà el mateix comportament.

Evitar dependències innecessàries entre objectes

En aquest sentit, no hem d’agrupar diferents widgets mitjançant comes. Ja que estem lligant aquests objectes, on un canvi a un widget provocarà canvis als altres, cosa que tard o d’hora en sortirem perjudicats. Si ens trobem que constantment necessitem agrupar-los és que alguna cosa estem fent malament, particularment en el procés d’identificació.

Extenent els objectes

S’usa el concepte d’orientació a objectes típic en els CSS. D’aquesta manera l’objecte fill hereda les propietats del pare. Comentarem, amb exemples com es fa aquesta extensió més en detall en un tercer post, com ja vam prometre.

Objectes compostos

Algunes components de la pàgina estaran formades per diversos objectes. En aquest cas no usem extensió, sinó composició. En aquest moment ens trobem en un dels majors problemes dels CSS: manca de control en l’herència i la cascada. Les regles han de ser específiques, de manera que no impliqui res l’ordre en el qual s’apliquen. Sinó és així augmentem la composició. Cal ser conscient en que tots els noms de les classes formen part del namespace global de CSS, de manera que cal ser coherent en la definició de noms.

Gnome3 a Ubuntu 11.04

Pitu Sabadí — Tue, 09 Aug 2011 22:12:14 +0000

Fa pocs dies, van haver-hi unes declaracions de Linus Torvalds, en les que criticava molt obertament Gnome3. Tan va ser així, que després de llegir les seves declaracions, vaig pensar que l’havia de provar, cosa que no havia fet per mandra, ja que usava Unity (que no em convenç del tot).

Així doncs el vaig instal·lar, ja mostrarem els passos, i la veritat, està molt bé, però queden coses per polir. Però ara mateix, senyor Linus, acabar de trobar una persona que li agrada el Gnome-Shell. Està ben pensat, és modern, i part molt important, agradable, amb bona experiència d’usuari. Encara li falten molts retocs, com per exemple un millor instal·lador de temes, més personalització de la barra superior, millor instal·lador i gestió de les extensions, menú global a la barra superior…

Tot i aquestes “pegues”, entre cometes perquè són coses que s’aniran millorant, personalment crec que Gnome-Shell és innovador, que ens planteja canvis en la nostra manera de treballar, sobretot els que portem anys amb Gnome2, però és còmoda, les notificacions són poc intrusives i compleixen totalment la seva funció d’una manera molt elegant. Amb el què he notat més canvis és amb el tema dels entorn de treball. Personalment, usava una configuració de 2 files per 4 columnes, és a dir, 8 escriptoris. La manera d’usar-los era lateral, però l’inferior en feia d’auxiliar. Tot i que sembli bastant enrabassat m’era molt eficient.

Podeu llegir les opinions de Linus, on en la meva opinió s’ha passat i a pecat de no acceptar el progrés. Poder en Linus de fa 15 anys li hagués encantat, o poder no.

Així doncs, de moment dono el meu vot de confiança a Gnome-Shell, que trobo millor que Unity, tot i que el d’Ubuntu trobo que està en un estat més acabat. A continuació mostrarem com instal·lar Gnome3 a Ubuntu 11.04, recordeu que si seguiu aquests passos, perdreu Gnome2 i en conseqüència les vostres configuracions anteriors.

Us deixo unes captures de la meva màquina.

Menú d’aplicacions.

Escriptori (massa brut d’icones) amb el nautilus.

Gestió de finestres.

Instal·lar Gnome3

Informació extreta de Taringa.

Afegim el repositori, actualitzem, instal·lem Gnome-Shell

$ sudo add-apt-repository ppa:gnome3-team/gnome3
$ sudo apt-get update && sudo apt-get dist-upgrade
$ sudo apt-get install gnome-shell
$ sudo apt-get install gnome-tweak-tool

Arreglar l’aspecte visual

Una cosa que no he acabat d’entendre és perquè la instal·lació el deixa amb un estil visual tan pobre. Des de Taringa aconsellen instal·lar els temes per defecte:

$ sudo apt-get install gnome-themes-standard

Des de Gnome Tweak Tool, podem canviar els temes. A mi no m’han acabat de convèncer, i m’he instal·lat Faenza pels icones, Zukitwo per a Gtk+, Adwaita pel cursor, Zukitwo per Gnome-Shell i per les finestres Adwaita i les fonts d’Ubuntu. A continuació us deixo les captures de la meva configuració.

Pel què fa a les extensions, queda pendent per un pròxim post, amb les que hagi trobat més interessants.

OOCSS, Object-Oriented CSS

Pitu Sabadí — Thu, 04 Aug 2011 21:34:07 +0000

Fa uns dies vaig veure una presentació Power Point que tractava dels OOCSS. No havia tingut temps a mirar-la en detall fins avui, on realment l’he llegida atentament, i m’he mirat els exemple de la pàgina web oficial. Mitjançant aquesta tècnica, podem tenir ordenat el nostre codi CSS, i que aquest sigui plenament reusable. Tan és així, que està estructurat de tal manera que diferents projectes comparteixen un conjunt de normes CSS, és el què anomanem Framework, i una part concreta per a cada projecte, anomenat tema.

Reusables

Extensibles

Anidats

Un cop ja sabem que hi ha una part anomenada Framework i una com a tema, comentarem quina és l’estructura de cada un. El framework està format per 5 components: Reset, Base, Grid, Widgets, Helpers. El tema està format per Widgets i opcionalment per Pages. Així doncs ja podem intuir que en el Framework hi tindrem definides les propietats generals, comuns a tots els projectes, mentre que els aspectes concrets, els widgets, els podrem redefinir a cada tema.

Abans d’entrar en tema, us faig saber que queden pendents dos posts al respecte. Un explicant les bones praxis per a l’ús de OOCSS, i un altre amb alguns exemples per a fer-ho més clar, ja que un tros de codi, val més que mil paraules.

Reset + Base

Podem usar-ne d’existents. Aquestes components ens ajuden a eliminar inconsistències entre navegadors i crear una base comuna. Tot i que ens podríem fer el nostre es recomana usar-ne de ja fets i provats com: 960.gs, formalize.me, normalize.css, html5boilerplate, YUI…

Grid

Aquest és un dels aspectes més interessants del sistema. Es tracta de la definició dels layouts. En aquest sentit, es defineixen amb % la relació. De l’estil si és un 100% si són 2 50%, etc. D’aquesta manera podrem generar fàcilment els layouts. Seran reusables i cada un el podrem customitzar com volguem. Es recomana usar-ne de ja existents, tot i que ens podem crear el nostre, com per exemple: 960.gs, 978.gs, blueprint, YUI…

Widgets, objectes reusables

Els widgets poden ser independents del projecte o no. Es tracta de definir un conjunt de classes CSS relacionades, que responen a una funcionalitat determinada. En aquest sentit, està bé saber quina part és comuna i quina part forma part del tema, de manera que podrem tenir cada objecte personalitzat per projecte.

Pages, opcional per al tema

Les pages són interessants per a projectes molt concrets, en els qual es vol que cada pàgina o secció de l’aplicació o web, es vulgui mostrar amb estils totalment diferents. D’aquesta manera podríem diferenciar cada una de les pàgines usant la composició. De fet, es podrien fer amb widgets, però en els casos que sigui útil és millor fer-ho per tal de tenir

Helpers

Es tracta de classes petites, que es poden usar per tots els objectes. Els usos típics poden ser per fer elements hiddens, cantons rodos, ombres…

Enllaços a les fonts de l’article.

Enllaç a la presentació.

Enllaç a la pàgina oficial.

Different Post Per Page de WordPress

Pitu Sabadí — Mon, 25 Jul 2011 21:50:02 +0000

Per defecte el gestor de continguts més popular per a blogs, només ens dóna opció per a configurar el nombre d’entrades per pàgina, sense poder diferenciar la pàgina d’inici, d’una cerca per etiqueta, d’una categoria… No és una bona opció limitar-ho mitjançant un if dins del bucle de si hi ha posts, ja que amb la pàginació estarem “eliminant” entrades.

Com en la majoria dels casos, hi ha un plugin que ens permet configurar aquests nombres. Es tracta, com es diu en el títol de l’entrada, Different Post Per Page. Per a instal·lar-l’ho cal anar a la secció d’extensions i buscar el nom del plugin. Un cop trobat, amb molt bona puntuació, l’instal·lem i l’activem, de manera que ja podrem configurar sense cap problema i des d’interfície gràfica.

Podeu trobar l’enllaç a la descàrrega a la font original.

BrowserID, autenticació fàcil

Pitu Sabadí — Mon, 25 Jul 2011 14:23:36 +0000

La seguretat a Internet és cada cop més important. Cada setmana podem llegir notícies de que han rebentat no sé quantes contrasenyes d’algun portal important. Cada cop estem registrats a més llocs, on hem de recordar el nom d’usuari i la contrasenya. El més perillós és usar una contrasenya fàcil i senzilla a tots aquests portals. Una altra activitat estandaritzada és no memoritzar la contrasenya i cada cop que hem d’usar aquell servei que quasi mai utilitzem que ens en torni a generar una de nova al nostre correu.

Davant d’aquestes costums poc segures, Mozilla, aprofitant la idea d’openID, crea BrowserID, per tal de poder recuperar les nostres contrasenyes de manera fàcil i senzilla mitjançant el correu electrònic i el domini en qüestió. Els fonaments bàsics d’aquesta iniciativa són:

Facilitat d’ús
Seguretat
Cross-Browser
Descentralització
Millora de l’experiència d’usuari
Respecte a la privadesa de dades.

BrowserID funciona a tots els navegadors, tan d’escriptori com mòbils i no es comparteix la informació entre serveis diferents. En un futur es preveu que sigui implementat de forma nativa per als diferents navegadors mitjançant la barra d’adreces (per exemple).

Podeu trobar un exemple en funcionament a TextChanels, on haureu de registrar-vos, creant un compte BrowserID. Un cop fet podeu anar a aquesta pàgina de prova. D’aquesta manera veurem com de fàcil és usar aquest mecanisme.

Podeu trobar més informació i un exemple per a la seva implementació a Mozilla Hacks. Encara no he provat aquest codi, en breu el provaré i ja comentaré aviam què tal funciona, però tot apunta a que funciona correctament, segons diuen els lectors de la font original.

Google Chrome i les aplicacions web

Pitu Sabadí — Tue, 19 Jul 2011 22:06:57 +0000

Des de fa temps les aplicacions web van guanyant terreny, i mica en mica van agafant un espai fins ara reservat a les aplicacions d’escriptori. Aquestes ofereixen serveis que no ens donen les altres. Per una banda, el ja conegut núvol, és a dir que podem accedir a la nostra informació des de qualsevol ordinador, sense que importi la plataforma. Per altra banda, i més important, el canvi de concepte.

Històricament tots hem treballat amb aplicacions d’escriptori per després compartir aquell document mitjançant el correu electrònic. Mica en mica, en hem anat acostumant a usar el Google Docs, quan diverses persones havíem de treballar en un mateix document. Així mateix, per a compartir fitxers s’ha popularitzat Dropbox i Grooveshark té la seva sortida en la música.

Cada cop ens costa menys pensar, en que en el futur, en local tindrem ben poca cosa. Si més no pel què fa a informació. No té cap sentit guardar-se els documents al disc dur del portàtil o a un USB si podem tenir aquells documents des de qualsevol lloc. En aquesta línia hi ha projectes com Ubuntu One, Dropbox o, anant més enllà, EyeOS.

Ahir, vaig descobrir una funcionalitat de Google Chrome que ens fa fer un pas mes en aquest món. Des de qualsevol pàgina ens podem crear un accés directe. Aquest accés directe, no és el típic preferits dels navegadors, sinó que a partir d’aquell icona (del menú, la barra de tasques o del menu d’aplicacions) podem obrir una finestra sense aparença d’usar un navegador web sinó amb la d’aplicació nativa.

Realment, no és una cosa espectacular, però sí molt pràctica. Molts de cops tanquem aquella pestanya que volem perquè n’estem tancant moltes de cop, o inclús ens molesta tenir oberta aquella pestanya tota l’estona, quan realment només la tenim en “background”. A més, ens elimina el tema de les pestanyes i la barra de direcció.

Pot ser tecnològicament no és molt innovador, però sí que ajuda molt en el moment d’usar aplicacions web pensades donant molt de pes a la paraula aplicació i poc a la web. Estem parlant d’aplicacions web com GrooveShark, Code Anywhere o HootSuite. Així mateix, també ens pot ser molt útil per a gMail, gMaps, gReader…

Com fer un accés directe

Per a poder fer aquests enllaços, cal que clickem a l’icona d’opcions de Google Chrome, un cop allà ens desplacem fins a Eines, per tal de que es desplegui el submenú. Un cop aquí seleccionem “Crear dreceres d’aplicacions” i seleccionem les opcions que desitjem.

A la versió de Windows, ens dóna les opcions per a crear la drecera a l’escriptori, a la barra de tasques o al menú d’aplicacions. En funció del que desitjem triem. No he pogut penjar cap imatge amb Windows perquè ja sabeu que la meva religió no em permet usar aquest sistema operatiu.

Per als usuaris de Linux, sapigueu que només podeu seleccionar les opcions d’escriptori i menu d’aplicacions. El procediment per a crear un enllaç a la barra de tasques, seria crear la drecera a l’escriptori i a partir d’aquí incloure’l al dock d’Unity. Una recomanació, si no voleu tenir l’icona a l’escriptori, és que el mogueu a una carpeta del vostre home i després el porteu a la barra d’aplicacions.

Per als mateixos usuaris de Linux, si voleu canviar la imatge que es mostra, obriu el gEdit i obriu la drecera amb aquest programa. En una de les darreres línies veureu que hi ha la direcció d’on carrega l’icona. Per tant, podeu substituir aquella línia pel path absolut de la icona que voleu mostrar.

Captures d’aplicacions

Google Maps

GrooveShark

Code Anywhere

Silencesoft RSS Reader, RSS extern a WordPress

Pitu Sabadí — Sun, 17 Jul 2011 10:37:44 +0000

Un dels elements més importants per a seguir blogs i portals web són els RSS. A vegades sembla que Twitter pot intentar substituir, però en aquesta xarxa social es prima molt el temps real i per tant no dóna exactament els mateixos serveis que podem tenir amb els lector RSS.

En alguns casos ens pot ser interessant incloure els continguts d’un altre RSS al nostre blog. És una bona manera de fer divulgació d’un blog nou amb poques visites a partir d’un altre més conegut. Per a fer això, com en la majoria del casos, tenim diverses maneres per fer-ho i si usem la plataforma més popular de blogs, hi ha molts plugins que ens ho resolen.

En aquest cas ens centrarem amb Silensoft RSS Reader. Amb aquest plugin podrem mostrar les entrades dels RSS que vulguem, sense necessitat de programar res i només configurant quins feeds volem seguir i com volem que es mostri la informació. A partir d’aquí haurem de crear una pàgina on hi inclourem un tag especial i ja ho tindrem preparat.

Primer de tot cal que ens instal·lem l’extensió des de l’apartat del gestor. Un cop instal·lada cal que l’activem. En el nostre menú ja tindrem un apartat per aquest plugin:

A la primera entrada podem configurar els feeds que volem incloure. Es fa de manera molt senzilla, a l’estil BlogRoll.

A la pestanya d’opcions, podem configurar quantes entrades mostrem, com mostrem alguna informació i quins paràmetres volem incloure. Així mateix, aquí és on definirem com volem que es mostrin els feeds. Si volem que sigui una pàgina ben integrada en el blog, hauríem d’agafar el codi HTML que generem per les entrades del blog i recrear-ho per a què sigui vàlid per a la informació que volem mostrar, per exemple:

Com podeu observar els tags importants són:

[date]
[link]
[title]
[content]
[url]
[author]

A partir d’aquí només queda que a la pàgina que feu hi inclogueu aquest codi:

[sil_rss:0:content:0]

Amb això ja hi ha la informació bàsica per a usar aquest plugin. Espero que us sigui útil.

Xuletari de l’SVN al terminal

Pitu Sabadí — Wed, 13 Jul 2011 21:28:36 +0000

Actualment els IDE’s de desenvolupament més usats (Netbeans i Eclipse) donen interfície gràfica per l’SVN, però personalment no m’agrada i prefereixo usar el terminal per aquestes tasques. En aquest sentit però quan vull buscar alguna cosa en el log molts de cops haig d’acabar buscant a Google o mirant moltes línies de palla.

Aquest post, vol servir com xuletari per tenir accés ràpid a algunes comandes que ens poden ser útils:

# Missatges i fitxers d’una revisió completa
$ svn log -v -r 82
# Veure log d’un usuari entre dues dates
$ svn log -r {YYYY-MM-DD}:{YYYY-MM-DD} | grep username | cut -d ” ” -f 1 | tail -n +2 | while read revision; do svn log -r $revision; done

La segona ens dóna opcions per jugar i precisar més les cerques que volem fer. Espero que us pugui ser d’utilitat. Si vaig trobant altres comandes útils les aniré afegint, per tal de que vagi quedant un bon xuletari.

JailbreakMe 3.0 i tres tweaks de Cydia

Pitu Sabadí — Tue, 12 Jul 2011 21:56:50 +0000

Fa uns dies va sortir l’aplicació web del nou exploit per tal de fer el jailbreak als nostres dispositius. És untethered i userland, és a dir, no necessita cable per a reiniciar el dispositiu i es fa des del mateix iPhone. JailbreakMe 3.0, que permet fer el jailbreak als dispositius amb IOS 4.3.3, és a dir el darrer fins que surti la 4.3.4 corregint aquesta vulnerabilitat i impedint el jailbreak, fins que arribi la versió de IOS 5. El jailbreak, serveix per a poder instal·lar aplicacions de tercers als nostres dispositius, nostres no d’Apple.

Una recomanació, pels que encara no teniu fet el jailbreak, si no us funciona i no aconseguiu instal·lar Cydia, hauríeu d’esborrar la memòria cau i les cookies. Per fer-ho aneu a Configuració, Safari i premeu a Esborrar memòria cau i a Esborrar galetes. Un cop fet això, ja ho podeu tornar a provar i us funcionarà. Podeu seguir els passos per a fer el Jailbreak.

Portava un temps que no actualitzava l’iPhone, m’havia quedat a la primera versió de IOS 4 i que tampoc feia massa cas a Cydia. Ja tenia l’iPhone molt maquejat i al meu gust, i com passa sempre en aquests casos, m’havia quedat molt endarrerit. En aquest sentit, no havia actualitzat Cydia (que funciona bastant millor que abans, tant en el moment d’instal·lar com quan estàs navegant per ella). Així mateix, no havia parat atenció a alguns tweaks a destacar a continuació.

FolderEnhancer

Canvia l’aparença de les carpetes i els dóna més funcionalitats, entre les que les destaquen que podem posar carpetes dins de carpetes i fer-hi escriptoris a cada una d’elles.

MobileNotifier

Millora del (nefast) sistema de notificacions a l’estil de com hauria de ser en el futur IOS5. Realment està molt ben fet, no és tan invasiva com el sistema actual. A més dóna accés ràpid a les aplicacions que han fet saltar-la.

Direct Closer Pro

Aquesta ja la coneixia, però no és massa popular entre els iPhones que vaig veient. Es tracta de quan obres el multitasca puguis tancar totes les aplicacions que vulguis directament.

Properament aniré penjant altres tweaks útils i que funcionin correctament. Pel què vaig veient de nou, sí que és molt necessari tenir fet el jailbreak a la nostra màquina. Poder usar tots els recursos i no limitar-nos a les idees d’Steve Jobs que és més doctrinari que bo.

Instal·lar EyeOS al teu servidor

Pitu Sabadí — Tue, 07 Jun 2011 22:36:07 +0000

Primer de tot cal baixar la darrera imatge des de la web oficial. També el podeu provar des dels servidors gratuïts, però una de les gràcies d’aquest projecte és que pots instal·lar el sistema en el teu servidor.

Un cop la tenim la descomprimim i la fem accessible a /var/www. Personalment ho faig mitjançant amb un softlink de una carpeta del meu home, però cada un que ho faci com més li agradi.

Amb la instal·lació bàsica d’un servidor Apache2 amb PHP5 i MySQL hi ha una sèrie de dependències que s’han de solucionar per a la correcta instal·lació.

# Apache mod_rewrite
sudo a2enmod rewrite
# PHP CURL
sudo apt-get install php5-curl
# GD extension
sudo apt-get install php5-gd
# MCRYPT
sudo apt-get install php5-mcrypt phpmyadmin
# SQLITE
sudo apt-get install php5-sqlite
# exiftool per a mp3
sudo apt-get install libimage-exiftool-perl

Un cop fet això hem de canviar algunes opcions del servidor, en concret obrim php.ini:

sudo gedit /etc/php5/apache2/php.ini

I aquí canviem els següents valors:

memory_limit = 300M
max_execution_time = 300

Finalment reiniciem l’Apache:

sudo /etc/init.d/apache2 restart

A continuació ja podem accedir a http://localhost/eyeos/install i instal·lar EyeOS. Un cop instal·lat el sistema serà accessible des de http://localhost/eyeos. Un cop fet el primer login podem tornar a posar el max_execution_time a 30. També és recomanable, un cop instal·lat el sistema al nostre servidor eliminar la carpeta install per tal d’evitar algun problema amb usuaris mal intencionats.

A partir d’aquí que cada un jugui amb aquest sistema.

Afegir resolució d’un monitor extern a Linux

Pitu Sabadí — Mon, 16 May 2011 15:15:17 +0000

Un dels aspectes que Ubuntu, versió rere versió no acaba de fer bé del tot és el fet de detectar la resolució apropiada pel monitor que connectem al nostre ordinador (normalment portàtil). En aquest sentit, podem muntant-se un script que s’executi quan entrem al nostres sistema i que afageix la resolució (o resolucions) que necessitem.

A continuació mostrarem la forma genèrica de les comandes a executar:

gtf resolució_horitzontal resolució_vertical freqüència
xrandr –newmode nom_sortida valors_obtinguts_de_la_comanda_anterior
xrandr –addmode tipus_sortida nom_sortida
xrandr –output tipus_sortida –mode nom_sortida

Exemple de com afegir una resolució de 1920×1080 amb una freqüència de 60 a les sortides VGA i HDMI d’un portàtil:

gtf 1920 1080 60;
xrandr –newmode 1920×1080 172.80 1920 2040 2248 2576 1080 1081 1084 1118 -HSync +Vsync;
xrandr –addmode VGA1 1920×1080;
xrandr –addmode HDMI1 1920×1080;

Per tant per a crear l’script:

sudo gedit /bin/configurar_monitors
afegir l’script obtingut amb les comandes anteriors
sudo chmod +x /bin/configurar_monitors
configurar_monitors

Finalment és possible que vulgueu que aquest script s’executi automàticament cada cop que obriu el sistema, per tal de que ell mateix pugui detectar quina és la millor sortida per al monitor connectat. Per fer-ho caldrà obrir: Aplicacions d’inici i afegir-ne una amb el nom que vulguem que sigui representatiu, que tingui com a ordre el nostre configurar_monitors i si volem posar-hi un comentari som lliures de fer-ho.

SSHFS: Muntar en el sistema de fitxers un servidor

Pitu Sabadí — Wed, 20 Apr 2011 12:01:54 +0000

Des de les primeres verions d’Ubuntu que he anat provant hi ha l’opció de connectar la nostra màquina amb un servidor, ja sigui amb SSH, FTP, etc. El problema d’usar aquest tipus de connexió és que el sistema de fitxers que estem accedint, no es munta en el sistema de fitxers del nostre client.

Hi ha una manera senzilla de solucionar aquest problema. Primer de tot cal instal·lar SSHFS:

sudo apt-get install sshfs

Un cop fet això cal crear els directoris en la nostra màquina on volem muntar les carpetes del servidor:

mkdir ~/carpeta_client

Finalment cal que ho muntem:

sshfs nom_usuari_servidor@http://url_server.cat:/carpeta_servidor ~/carpeta_client

Haurem d’entrar la contrasenya de l’usuari amb què ens connectem al servidor i ja estarà funcionant.

Web service amb PHP i NuSOAP

Pitu Sabadí — Tue, 12 Apr 2011 17:13:03 +0000

Un Web service és un conjunt de protocols i estàndards que serveixen per intercanviar dades entre aplicacion. Diferents aplicacions desenvolupades amb llenguatges de programació diferents i executades des de qualsevol plataforma, poden intercanviar dades per Internet.

La majoria de nosaltres quan pensem amb Web service des seguida ens ve al cap Java i Tomcat. És una de les maneres més senzilles de fer-ho, però a vegades, en funció del què hi ha fet en un projecte, ens pot ser molt més senzill fer-ho amb PHP.

Per tal de poder usar els codis que es mostren a continuació, cal que ens descarreguem la llibreria NuSOAP de PHP,

A continuació veurem un exemple de Servidor, que el crida un client.

Server.php

require_once(‘NUSOAP/nusoap.php’);
$soap = new soap_server;
$soap->configureWSDL(‘open-pitu Service’, ‘http://latevaurl.cat/elteupath/’);
$soap->register(
‘hola’,// nom del mètode
array(‘nom’ => ‘xsd:string’, ‘cognom’ => ‘xsd:string’ ),// variables d’entrada
array(‘return’ => ‘xsd:string’), // retorn
‘uri:hola’,// namespace
‘uri:hola/get’,// SOAPAction
‘rpc’,// style
‘encoded’// use
);
function hola( $nom, $cognom ){
return “Hola “.$nom.” “.$cognom.”!”;
}
$HTTP_RAW_POST_DATA = isset($HTTP_RAW_POST_DATA) ? $HTTP_RAW_POST_DATA : ”;
$soap->service($HTTP_RAW_POST_DATA);

Client.php

require_once(‘NUSOAP/nusoap.php’);
try
$client = new nusoap_client(‘http://latevaurl.cat/elteupath/server.php?wsdl’);
$result = $client->call(‘Hola’, array(‘nom’ => “Leo”, ‘cognom’ => “Messi” ) );
print_r($result);
}
catch( SoapFault $e ){
echo ‘EXCEPTION=’.$e;
}

Recordeu que per a què el codi funcioni cal tenir activat SOAP a Apache. Podeu seguir aquestes intruccions.

Resum gràfic d’HTML5

Pitu Sabadí — Mon, 04 Apr 2011 22:46:03 +0000

De la mà de TechKing tenim un resum gràfic a mode d’infografia en la que podem veure totes les opcions que ens ofereix. Podem veure les novetats d’HTML5, les opcions que es mantenen respecte la versió anterior i els que han queda en desús. Així mateix veurem al final de tot quines opcions suporten els navegadors més usats, cosa bastant útil en aquest món com ja sabreu.

Ens pot ser molt útil en el nostre dia dia mentre encara no tinguem ben assimilat el nou llenguatge i necessitem fer petites consultes de comprovació.

Validació de formularis amb HTML5

Pitu Sabadí — Tue, 29 Mar 2011 00:02:30 +0000

Un dels aspectes més comentats com a gran millora de l’HTML5 és la validació de formularis a la banda del client. És a dir, és una primera comprovació, però recordeu que sempre s’ha de fer també a la banda del servidor. En aquest article veurem les opcions que ens dóna aquest nou tipus de validació de formularis.

Primer de tot, veurem quins són els nous tipus d’entrada per als formularis:

Nom:
E-mail:
URL:
Missatge:

Així mateix, podem definir estils diferents per a cada un dels estats en què es troaba aquella entrada:

input:required { … }
input:disabled { … }
input:checked + label { … }
input[type=button]:default { … }
input:invalid { … }
input:read-only { … }

A continuació aquest codi en funcionament:

Realment és molt còmode per fer una primera validació sense haver d’escriure res de JavaScript. De moment tot el què he provat d’HTML5 funciona molt bé!

Font de l’article: Dev.Opera

FireSSH i FireFTP, ampliant Firefox

Pitu Sabadí — Thu, 24 Mar 2011 22:29:49 +0000

Els de MuyLinux fa uns dies em van descubrir una extensió de Firefox molt interessant per alguns moments determinats. És tracta d’un complement que ens converteix una pestanya del Firefox en un client SSH. És molt senzill d’instal·lar, senzillament hem de visitar la pàgina de l’extensió i clickar al botó corresponent per dur-la a terme.

Per altra banda, una extensió complementària a aquesta és FireFTP. És del mateix autor que l’extensió exterior, i en aquest cas ens converteix el navegador en un client FTP. Per a instal·lar l’extensió cal seguir el mateix procediment que abans des de la pàgina oficial.

Un cop instal·lats els dos plugins cal reiniciar el navegador web. He provat les dues extensions amb el Firefoz 4.0, i és fantàstic amb la rapidesa en què s’inicia aquest nou navegador. De moment però el que tinc configurat per defecte és el de Chrome, qui guanyarà la batalla?