open-pitu, el blog lliure en català » Web http://openpitu.com Blog dedicat al software lliure i la programació. Mon, 03 Sep 2012 15:37:52 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Esborrar nodes del DOM en PHP http://openpitu.com/2011/08/30/esborrar-nodes-del-dom-en-php/ http://openpitu.com/2011/08/30/esborrar-nodes-del-dom-en-php/#comments Tue, 30 Aug 2011 22:05:05 +0000 Pitu Sabadí http://openpitu.com/?p=956
  • $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:
    1. $dom = new DOMDocument;
    2. $dom->loadHTMLFile( 'exemple.html' );
    3. $xPath = new DOMXPath( $dom );
    Un cop fet això si volem podem obtenir tots els nodes que siguin imatges de la següent manera:
    1. $images = $xml->xpath( '//img' );
    Per a poder, en aquest cas esborrar els nodes obtinguts:
    1. foreach ($images as $node) {
    2. $node->parentNode->removeChild($node);
    3. }
    Un cop acabat el bucle caldria guardar el DOM a la variable o el fitxer en qüestió:
    1. $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:
    1. $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.

    ]]>

    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.

    1. $dom = new DOMDocument;
    2. $dom->loadHTML( $htmlString );
    3. $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:

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

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

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

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

    1. foreach ($images as $node) {
    2. $node->parentNode->removeChild($node);
    3. }

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

    1. $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:

    1. $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.

    ]]>     http://openpitu.com/2011/08/30/esborrar-nodes-del-dom-en-php/feed/ 0     Mozilla presenta WebAPI http://openpitu.com/2011/08/24/mozilla-presenta-webapi/ http://openpitu.com/2011/08/24/mozilla-presenta-webapi/#comments Wed, 24 Aug 2011 21:55:27 +0000 Pitu Sabadí http://openpitu.com/?p=941 Genbeta he vist la notícia de la presentació de WebAPI. Es tracta d'un projecte de Mozilla encarat al desenvolupament d'aplicacions per a mòbil en HTML5. La gràcia del projecte és que permetrà accedir a les components del dispositiu tal i com si es tractés d'una aplicació nativa. L'avantatge d'aquestes aplicacions seria que serien vàlides per a qualsevol plataforma.

    La intenció de la Fundació Mozilla és proposar a W3C que estableixi WebAPI com un estàndard. Avui en dia el projecte encara està molt verd, però segur que faran una bona feina. Esperem que els desenvolupadors d'aplicacions mòbil tinguin en compte aquesta nova possibilitat. Cal tenir present que ara pot ser una tasca molt feixuga mantenir una versió d'una aplicació relativament senzilla en com a mínim dues plataformes totalment diferents. Així mateix, ja hi ha llibreries que comencen a treballar en aquest sentit, com per exemple PhoneGap, però el fet de poder tenir un estàndard és la gran gràcia. D'aquesta manera ja no es dependria de llibreries fetes per tercers. Com ho veieu?

    Voleu treballar en aquest projecte?

    Des de la pàgina oficial es pot accedir a la oferta de treball per a participar en el desenvolupament d'aquest projecte. Realment és un projecte molt engrescador, a tots aquells desenvolupadors que coincideixin en el perfil que busquen i que no tenen feina o que volen fer un canvi d'aires jo els recomanaria enviar el currículum. Pot ser una molt bona experiència professional. Podeu veure l'oferta de treball.]]>

    De la mà de Genbeta he vist la notícia de la presentació de WebAPI. Es tracta d’un projecte de Mozilla encarat al desenvolupament d’aplicacions per a mòbil en HTML5. La gràcia del projecte és que permetrà accedir a les components del dispositiu tal i com si es tractés d’una aplicació nativa. L’avantatge d’aquestes aplicacions seria que serien vàlides per a qualsevol plataforma.

    La intenció de la Fundació Mozilla és proposar a W3C que estableixi WebAPI com un estàndard. Avui en dia el projecte encara està molt verd, però segur que faran una bona feina. Esperem que els desenvolupadors d’aplicacions mòbil tinguin en compte aquesta nova possibilitat.

    Cal tenir present que ara pot ser una tasca molt feixuga mantenir una versió d’una aplicació relativament senzilla en com a mínim dues plataformes totalment diferents. Així mateix, ja hi ha llibreries que comencen a treballar en aquest sentit, com per exemple PhoneGap, però el fet de poder tenir un estàndard és la gran gràcia. D’aquesta manera ja no es dependria de llibreries fetes per tercers. Com ho veieu?

    Font de la notícia: Genbeta

    Voleu treballar en aquest projecte?

    Des de la pàgina oficial es pot accedir a la oferta de treball per a participar en el desenvolupament d’aquest projecte. Realment és un projecte molt engrescador, a tots aquells desenvolupadors que coincideixin en el perfil que busquen i que no tenen feina o que volen fer un canvi d’aires jo els recomanaria enviar el currículum. Pot ser una molt bona experiència professional.

    Podeu veure l’oferta de treball.

    ]]>     http://openpitu.com/2011/08/24/mozilla-presenta-webapi/feed/ 0     OOCSS (2a part), profunditzant en els widgets http://openpitu.com/2011/08/10/oocss-2a-part-profunditzant-en-els-widgets/ http://openpitu.com/2011/08/10/oocss-2a-part-profunditzant-en-els-widgets/#comments Wed, 10 Aug 2011 22:12:01 +0000 Pitu Sabadí http://openpitu.com/?p=895

    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.]]>

    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.

    ]]>     http://openpitu.com/2011/08/10/oocss-2a-part-profunditzant-en-els-widgets/feed/ 0     La setmana a Twitter http://openpitu.com/2011/08/07/la-setmana-a-twitter-3/ http://openpitu.com/2011/08/07/la-setmana-a-twitter-3/#comments Sun, 07 Aug 2011 22:18:16 +0000 Pitu Sabadí http://openpitu.com/?p=874 @openpitu durant aquests dies.

    Avaries 2.0

    Avaries 2.0: "en un minut es fan set-centes mil cerques a Google, pugen 600 vídeos, més de 1.500 posts i 50 blogs nous"http://bit.ly/ritgSN

    Article del diari Ara en el que s'explique una mica què passa quan alguns serveis com Twitter, Whatsapp, o senzillament no tenim 3G com actuem i què passa. Vaig destacar una frase en el tweet, que no és ben bé del què anava, el títol de l'article és: Avaries 2.0: les 5 coses que et cal saber si ets un usuari malaltís de les xarxes socials - El creixement exponencial de Twitter, Facebook o Whatsapp posa a prova les infraestructures digitals i la dependència dels usuaris al nou univers d'informació compartida

    Error a Google+ en català

    Curiós que a #Google+ en #català, versió móbil, hi hagi aquest tipus d'errors: http://ow.ly/i/fjQG

    L'altre dia, comparant l'aplicació nativa de l'iPhone de Google+ i la versió mòbil, vaig trobar-me amb aquest error, amb el caràcter d'apòstrof. Sembla que no hagin passat un test i arreglat aquest problema. Els catalans sembla que ens estiguem acostumant a que aquests tipus d'error amb la nostra llengua, i això no pot ser.

    Les 5 batalles de Microsoft

    Ls cinc batalles en les que Microsoft es juga el seu futur http://feedly.com/k/pq8PXm

    Interessant article de Genbeta en el que es comenten i analitzen els 5 grans fronts que té oberts Microsoft, i que del resultat dels quals depen força la companys de Bill Gates. En aquest sentit, només puc dir: Llarga vida al software lliure!

    Jailbreak fins a IOS5

    Com era d'esperar, no hi haurà #Jailbreak untethered fins #iOS5 http://feedly.com/k/nk8q3a

    Els hackers que s'encarreguen del jailbreak, han comfirmat que es guardaran les vulnerabilitats per a la publicació de l'IOS5, per tal de poder treure al seu moment el jailbreak untethered per la nova versió de sistema operatiu.

    A en Linus no li agrada Gnome3

    Linus Switches to Xfce, Calls GNOME 3 an Unholy Mess! http://feedly.com/k/qqhj9J

    L'opnió d'una persona com en Linus és referent i sempre cal tenir-la en compte. En aquest sentit, Gnome3 (que encara no l'he provat), està sent molt criticat per alguns i molt elevat per altres. En Linus, ja s'ha posiciónat, i ho ha fet en contra, aquí podeu llegir-ne les seves reaccions.

    Stallman opina d'EyeOS

    Richard Stallman & Marcelo d'Elia Branco on Cloud Computing, eyeOS - http://t.co/FWxp2md

    Vïdeo en el que podem veure com Richard Stallman opina d'EyeOS. El vídeo és una mica curt i de poca qualitat, però veure com ell opina d'aquest projecte ens encoratge.

    OpenJusticia

    OpenJustitia y la presió del software propietari a Suïssahttp://feedly.com/k/pGYiWp

    Article penjat a MuyLinux, en el que podem veure amb l'opsició que es pot trobar un govern quan comença iniciatives lliures. Serà un tema que haurem d'anar seguint, i sobretot veure com acaba.

    Anonymous atacarà Facebook

    Anonymous promet hackejar a Facebook el 5 de novembrehttp://feedly.com/k/mYCUcd

    Com la majoria de vosaltres sabeu, el col·lectiu Anonymous ha anunciat que el dia 5 de novembre s'atacarà Facebook. Personalment cada dia m'agrada menys aquesta xarxa social, poc interessant i amb molta escombraria... A veure com evoluciona.

    Symfony 2 alliberat

    Symfony 2 alliberat http://feedly.com/k/oX5qaL

    Nova versió alliberada del famós framework PHP. Personalment només he usat la versió anterior, la 1.4, i haig de dir que hi ha una molt bona feina a darrere. Després d'un període d'aprenentatge es torna en una feina molt còmoda treballar amb aquest framework.]]>

    De nou, el resum setmanal del què ha estat el perfil d’@openpitu durant aquests dies.

    Avaries 2.0

    Avaries 2.0: “en un minut es fan set-centes mil cerques a Google, pugen 600 vídeos, més de 1.500 posts i 50 blogs nous”http://bit.ly/ritgSN

    Article del diari Ara en el que s’explique una mica què passa quan alguns serveis com Twitter, Whatsapp, o senzillament no tenim 3G com actuem i què passa. Vaig destacar una frase en el tweet, que no és ben bé del què anava, el títol de l’article és: Avaries 2.0: les 5 coses que et cal saber si ets un usuari malaltís de les xarxes socials - El creixement exponencial de Twitter, Facebook o Whatsapp posa a prova les infraestructures digitals i la dependència dels usuaris al nou univers d’informació compartida

    Error a Google+ en català

    Curiós que a #Google+ en #català, versió móbil, hi hagi aquest tipus d’errors: http://ow.ly/i/fjQG

    L’altre dia, comparant l’aplicació nativa de l’iPhone de Google+ i la versió mòbil, vaig trobar-me amb aquest error, amb el caràcter d’apòstrof. Sembla que no hagin passat un test i arreglat aquest problema. Els catalans sembla que ens estiguem acostumant a que aquests tipus d’error amb la nostra llengua, i això no pot ser.

    Les 5 batalles de Microsoft

    Ls cinc batalles en les que Microsoft es juga el seu futur http://feedly.com/k/pq8PXm

    Interessant article de Genbeta en el que es comenten i analitzen els 5 grans fronts que té oberts Microsoft, i que del resultat dels quals depen força la companys de Bill Gates. En aquest sentit, només puc dir: Llarga vida al software lliure!

    Jailbreak fins a IOS5

    Com era d’esperar, no hi haurà #Jailbreak untethered fins #iOS5 http://feedly.com/k/nk8q3a

    Els hackers que s’encarreguen del jailbreak, han comfirmat que es guardaran les vulnerabilitats per a la publicació de l’IOS5, per tal de poder treure al seu moment el jailbreak untethered per la nova versió de sistema operatiu.

    A en Linus no li agrada Gnome3

    Linus Switches to Xfce, Calls GNOME 3 an Unholy Mess! http://feedly.com/k/qqhj9J

    L’opnió d’una persona com en Linus és referent i sempre cal tenir-la en compte. En aquest sentit, Gnome3 (que encara no l’he provat), està sent molt criticat per alguns i molt elevat per altres. En Linus, ja s’ha posiciónat, i ho ha fet en contra, aquí podeu llegir-ne les seves reaccions.

    Stallman opina d’EyeOS

    Richard Stallman & Marcelo d’Elia Branco on Cloud Computing, eyeOS - http://t.co/FWxp2md

    Vïdeo en el que podem veure com Richard Stallman opina d’EyeOS. El vídeo és una mica curt i de poca qualitat, però veure com ell opina d’aquest projecte ens encoratge.

    OpenJusticia

    OpenJustitia y la presió del software propietari a Suïssahttp://feedly.com/k/pGYiWp

    Article penjat a MuyLinux, en el que podem veure amb l’opsició que es pot trobar un govern quan comença iniciatives lliures. Serà un tema que haurem d’anar seguint, i sobretot veure com acaba.

    Anonymous atacarà Facebook

    Anonymous promet hackejar a Facebook el 5 de novembrehttp://feedly.com/k/mYCUcd

    Com la majoria de vosaltres sabeu, el col·lectiu Anonymous ha anunciat que el dia 5 de novembre s’atacarà Facebook. Personalment cada dia m’agrada menys aquesta xarxa social, poc interessant i amb molta escombraria… A veure com evoluciona.

    Symfony 2 alliberat

    Symfony 2 alliberat http://feedly.com/k/oX5qaL

    Nova versió alliberada del famós framework PHP. Personalment només he usat la versió anterior, la 1.4, i haig de dir que hi ha una molt bona feina a darrere. Després d’un període d’aprenentatge es torna en una feina molt còmoda treballar amb aquest framework.

    ]]>     http://openpitu.com/2011/08/07/la-setmana-a-twitter-3/feed/ 1     OOCSS, Object-Oriented CSS http://openpitu.com/2011/08/04/oocss-object-oriented-css/ http://openpitu.com/2011/08/04/oocss-object-oriented-css/#comments Thu, 04 Aug 2011 21:34:07 +0000 Pitu Sabadí http://openpitu.com/?p=864 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.]]>

    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.

    ]]>     http://openpitu.com/2011/08/04/oocss-object-oriented-css/feed/ 0     Different Post Per Page de WordPress http://openpitu.com/2011/07/25/differentpostperpage-plugin-de-wordpress/ http://openpitu.com/2011/07/25/differentpostperpage-plugin-de-wordpress/#comments Mon, 25 Jul 2011 21:50:02 +0000 Pitu Sabadí http://openpitu.com/?p=827

    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.]]>

    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.

    ]]>     http://openpitu.com/2011/07/25/differentpostperpage-plugin-de-wordpress/feed/ 0     BrowserID, autenticació fàcil http://openpitu.com/2011/07/25/browserid-autenticacio-facil-i-segura/ http://openpitu.com/2011/07/25/browserid-autenticacio-facil-i-segura/#comments Mon, 25 Jul 2011 14:23:36 +0000 Pitu Sabadí http://openpitu.com/?p=822

    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:
    1. Facilitat d'ús
    2. Seguretat
    3. Cross-Browser
    4. Descentralització
    5. Millora de l'experiència d'usuari
    6. 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.]]>

    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:

    1. Facilitat d’ús
    2. Seguretat
    3. Cross-Browser
    4. Descentralització
    5. Millora de l’experiència d’usuari
    6. 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.

    ]]>     http://openpitu.com/2011/07/25/browserid-autenticacio-facil-i-segura/feed/ 0     Mobilizer, eina per a desenvolupadors mòbils http://openpitu.com/2011/07/24/mobilizer-eina-per-a-desenvolupadors-mobils/ http://openpitu.com/2011/07/24/mobilizer-eina-per-a-desenvolupadors-mobils/#comments Sun, 24 Jul 2011 13:27:32 +0000 Pitu Sabadí http://openpitu.com/?p=804

    Mobilizer està fet amb Adobe Air i ens permet poder visualitzar amb un iPhone 4, BlackBerry Storm, Palm Pre i HTC Evo. Podem usar-ho amb pàgines que estiguin penjades a Internet i amb projectes locals. No és una visualització perfecte de tal i com es veu, però sí que ens serveix a nivell orientatiu. De moment encara és la versió beta, podem baixar-nos gratuïtament el programa a la pàgina oficial. Es tracta d'una aplicació multiplataforma, ja que ho podem usar amb Linux, Apple i Windows.

    ]]>

    Actualment hi ha una gran quantitat de projectes que necessiten una versió mòbil. En molts casos opten per a una pàgina web en format per a smartphone. Un dels grans problemes és poder anar comprovant amb diversos dispositius com es veu, ja que tots conten amb resolucions de pantalla diferents.

    Mobilizer està fet amb Adobe Air i ens permet poder visualitzar amb un iPhone 4, BlackBerry Storm, Palm Pre i HTC Evo. Podem usar-ho amb pàgines que estiguin penjades a Internet i amb projectes locals. No és una visualització perfecte de tal i com es veu, però sí que ens serveix a nivell orientatiu.

    De moment encara és la versió beta, podem baixar-nos gratuïtament el programa a la pàgina oficial. Es tracta d’una aplicació multiplataforma, ja que ho podem usar amb Linux, Apple i Windows.

    ]]>     http://openpitu.com/2011/07/24/mobilizer-eina-per-a-desenvolupadors-mobils/feed/ 0     Silencesoft RSS Reader, RSS extern a WordPress http://openpitu.com/2011/07/17/silencesoft-rss-reader-entrades-dun-rss-extern-a-wordpress/ http://openpitu.com/2011/07/17/silencesoft-rss-reader-entrades-dun-rss-extern-a-wordpress/#comments Sun, 17 Jul 2011 10:37:44 +0000 Pitu Sabadí http://openpitu.com/?p=766 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:
    1. [sil_rss:0:content:0]
    Amb això ja hi ha la informació bàsica per a usar aquest plugin. Espero que us sigui útil.]]>

    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:

    1. [date]
    2. [link]
    3. [title]
    4. [content]
    5. [url]
    6. [author]

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

    1. [sil_rss:0:content:0]

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

    ]]>     http://openpitu.com/2011/07/17/silencesoft-rss-reader-entrades-dun-rss-extern-a-wordpress/feed/ 0     Resum gràfic d’HTML5 http://openpitu.com/2011/04/04/resum-grafic-dhtml5/ http://openpitu.com/2011/04/04/resum-grafic-dhtml5/#comments Mon, 04 Apr 2011 22:46:03 +0000 Pitu Sabadí http://openpitu.com/?p=654 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.

    Infografia de TechKing.

    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ó.

    ]]>

    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.

    Infografia de TechKing.

    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ó.

    ]]>     http://openpitu.com/2011/04/04/resum-grafic-dhtml5/feed/ 2     Validació de formularis amb HTML5 http://openpitu.com/2011/03/29/validacio-de-formularis-amb-html5/ http://openpitu.com/2011/03/29/validacio-de-formularis-amb-html5/#comments Tue, 29 Mar 2011 00:02:30 +0000 Pitu Sabadí http://openpitu.com/?p=623
  • <form>
  • <p><label>Nom: <input name=nom required></label></p>
  • <p><label>E-mail: <input name=email type=email required></label></p>
  • <p><label>URL: <input name=url type=url></label></p>
  • <p><label>Missatge: <textarea name=comment required></textarea></label></p>
  • <p><input type=submit value=ENVIAR></p>
  • </form>
    • Així mateix, podem definir estils diferents per a cada un dels estats en què es troaba aquella entrada:
    1. input:required { ... }
    2. input:disabled { ... }
    3. input:checked + label { ... }
    4. input[type=button]:default { ... }
    5. input:invalid { ... }
    6. 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]]>

    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:

    1. <form>
    2. <p><label>Nom: <input name=nom required></label></p>
    3. <p><label>E-mail: <input name=email type=email required></label></p>
    4. <p><label>URL: <input name=url type=url></label></p>
    5. <p><label>Missatge: <textarea name=comment required></textarea></label></p>
    6. <p><input type=submit value=ENVIAR></p>
    7. </form>

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

    1. input:required { … }
    2. input:disabled { … }
    3. input:checked + label { … }
    4. input[type=button]:default { … }
    5. input:invalid { … }
    6. 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

    ]]>     http://openpitu.com/2011/03/29/validacio-de-formularis-amb-html5/feed/ 0     FireSSH i FireFTP, ampliant Firefox http://openpitu.com/2011/03/24/firessh-i-fireftp-ampliant-firefox/ http://openpitu.com/2011/03/24/firessh-i-fireftp-ampliant-firefox/#comments Thu, 24 Mar 2011 22:29:49 +0000 Pitu Sabadí http://openpitu.com/?p=618 Logo FireSSH.

    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?]]>

    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.

    Logo FireSSH.

    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?

    ]]>     http://openpitu.com/2011/03/24/firessh-i-fireftp-ampliant-firefox/feed/ 0     Elements editables en HTML5 http://openpitu.com/2011/03/22/elements-editables-en-html5/ http://openpitu.com/2011/03/22/elements-editables-en-html5/#comments Tue, 22 Mar 2011 12:45:44 +0000 Pitu Sabadí http://openpitu.com/?p=507
  • <p id="text" contenteditable="true">Aquest contingut serà editable.</p>
  • <a id="desa" href="#">DESA!</a>
    • Un cop tenim això podem definit el JS que ens permetrà obtenir el contingut i enviar-l'ho al servidor (per exemple).
    1. $('#desa').click(function(){
    2. var aux = $('#text').html();
    3. alert( aux );
    4. });​
    A continuació podem veure com el contingut d'un div és editable:

    AQUEST CONTINGUT ES POT EDITAR.

    Aquesta funcionalitat pot ser molt ben rebuda per la comunitat de desenvolupadors, ja que pot solucionar la creació de múltiples pantalles (una que mostra la informació entrada i una altra per si es vol modificar) ja que tot es pot fer amb la mateixa pantalla. Podeu provar aquesta nova funcionalitat de manera dinàmica gràcies a Rendera.]]>

    L’HTML5 ens aporta una gran quantitat de novetats, que mica en mica ens hem d’anar familiartizant. En aquest sentit hi ha la utilitat de que els elements puguin ser editables. En aquest document veurem com fer que un element sigui editable i com podríem guardar aquest text.

    Contingut editable en HTML5

    Primer de tot el què farem serà definir un paràgraf que pugui ser editable i un botó per a que l’usuari pugui indicar que vol desar els canvis que ha efectuat.

    1. <p id=”text” contenteditable=”true”>Aquest contingut serà editable.</p>
    2. <a id=”desa” href=”#”>DESA!</a>

    Un cop tenim això podem definit el JS que ens permetrà obtenir el contingut i enviar-l’ho al servidor (per exemple).

    1. $(‘#desa’).click(function(){
    2. var aux = $(‘#text’).html();
    3. alert( aux );
    4. });​

    A continuació podem veure com el contingut d’un div és editable:

    AQUEST CONTINGUT ES POT EDITAR.

    Aquesta funcionalitat pot ser molt ben rebuda per la comunitat de desenvolupadors, ja que pot solucionar la creació de múltiples pantalles (una que mostra la informació entrada i una altra per si es vol modificar) ja que tot es pot fer amb la mateixa pantalla.
    Podeu provar aquesta nova funcionalitat de manera dinàmica gràcies a Rendera.

    ]]>     http://openpitu.com/2011/03/22/elements-editables-en-html5/feed/ 0     Dissenyant un blog en HTML5 http://openpitu.com/2011/03/17/dissenyant-un-blog-en-html5/ http://openpitu.com/2011/03/17/dissenyant-un-blog-en-html5/#comments Thu, 17 Mar 2011 23:40:45 +0000 Pitu Sabadí http://openpitu.com/?p=492 Normalment quan es parla d'HTML5 es parla de les grans novetats que ens porta per a fer més fàcil la interacció en les aplicacions web, els fulls d'estils o la integració multimèdia que ens dóna. En aquest post, farem una introducció dels nous elements que ens proporciona per a la web semàntica.

    Com molts haureu comprovat, he actualitzat el disseny d'open-pitu, i l'he passat a HTML5. En aquest procés vaig necessitar investigació per veure quines estructures necessitava usar i com es feia. Vaig consultar molt blogs i llocs d'Internet, però un dels que em va anar millor va ser <html>5doctor.

    En l'article enllaçat (en anglès), s'explica acuradament com cal fer un blog en el nou llenguatge web. En aquest sentit, a part de les explicacions que són molt útils i que si teniu interès en el tema us recomano que us llegiu, vull destacar aquestes dues imatges, que ens mostren d'una manera molt gràfica com han canviat les estructures dels blogs:

    Abans HTML5

    D'aquesta manera ens podem fer una idea ràpida de quina estructura ens hem de muntar per tal de ser coherents amb el nou llenguatge. La veritat és quan estàs desenvolupant et sents molt còmode, ja que visualment tot queda molt més ben endreçat que amb els divs típics.

    Mica en mica miraré d'anar afegint més articles d'aquest nou llenguatge, que mica en mica tots anirem descubrint.

    ]]>

    Normalment quan es parla d’HTML5 es parla de les grans novetats que ens porta per a fer més fàcil la interacció en les aplicacions web, els fulls d’estils o la integració multimèdia que ens dóna. En aquest post, farem una introducció dels nous elements que ens proporciona per a la web semàntica.
    Com molts haureu comprovat, he actualitzat el disseny d’open-pitu, i l’he passat a HTML5. En aquest procés vaig necessitar investigació per veure quines estructures necessitava usar i com es feia. Vaig consultar molt blogs i llocs d’Internet, però un dels que em va anar millor va ser <html>5doctor.
    En l’article enllaçat (en anglès), s’explica acuradament com cal fer un blog en el nou llenguatge web. En aquest sentit, a part de les explicacions que són molt útils i que si teniu interès en el tema us recomano que us llegiu, vull destacar aquestes dues imatges, que ens mostren d’una manera molt gràfica com han canviat les estructures dels blogs:

    Abans HTML5

    D’aquesta manera ens podem fer una idea ràpida de quina estructura ens hem de muntar per tal de ser coherents amb el nou llenguatge. La veritat és quan estàs desenvolupant et sents molt còmode, ja que visualment tot queda molt més ben endreçat que amb els divs típics.
    Mica en mica miraré d’anar afegint més articles d’aquest nou llenguatge, que mica en mica tots anirem descubrint.

    ]]>     http://openpitu.com/2011/03/17/dissenyant-un-blog-en-html5/feed/ 0     Descobrir els temps de càrrega d’una web a tot el món http://openpitu.com/2010/10/03/descobrir-els-temps-de-carrega-duna-web-a-tot-el-mon/ http://openpitu.com/2010/10/03/descobrir-els-temps-de-carrega-duna-web-a-tot-el-mon/#comments Sun, 03 Oct 2010 23:10:03 +0000 Pitu Sabadí http://openpitu.com/?p=226 Internet Supervision ens ofereix una visió més global dels temps de càrrega. En el meu cas, no és una aplicació amb molta funcionalitat, però sí que ho pot ser quan estem davant d'un cas de pàgina amb un destinatari final a nivell internacional.

    Els resultats dels tests es mostren en format gràfic (tal i com es pot veure amb l'anterior imatge) i després mitjançant la taula següent  amb la informació referent al punt geogràfic, els KBytes descarregats, els segons d'espera i la connexió amb Kbps. Les imatges del post són de la prova feta amb open-pitu.

    ]]>

    Hi ha moltes webs que ens mesuren el temps de càrrega de la teva pàgina web. En aquest cas, Internet Supervision ens ofereix una visió més global dels temps de càrrega. En el meu cas, no és una aplicació amb molta funcionalitat, però sí que ho pot ser quan estem davant d’un cas de pàgina amb un destinatari final a nivell internacional.

    Els resultats dels tests es mostren en format gràfic (tal i com es pot veure amb l’anterior imatge) i després mitjançant la taula següent  amb la informació referent al punt geogràfic, els KBytes descarregats, els segons d’espera i la connexió amb Kbps. Les imatges del post són de la prova feta amb open-pitu.

    ]]> http://openpitu.com/2010/10/03/descobrir-els-temps-de-carrega-duna-web-a-tot-el-mon/feed/ 0 Google Chrome Frame, millorem IE http://openpitu.com/2010/09/27/google-chrome-frame-millorem-ie/ http://openpitu.com/2010/09/27/google-chrome-frame-millorem-ie/#comments Mon, 27 Sep 2010 23:49:00 +0000 Pitu Sabadí http://openpitu.com/?p=215

    A la web, hi ha moltes comparatives entre els diferents navegadors que podem triar actualment (Firefox, Chrome, Safari, Internet Explorer...). En la major part hi pots comprovar diferents característiques i enfocaments, des de les "menys tècniques", les que comparen velocitats, les mes especialitzades... Però aquest post, no anirà d'aquest tema. En la major part dels casos, el desenvolupador ha de perdre un bon temps per a que es vegi per a tots els navegadors igual i en concret per a totes les versions d'Internet Explorer, ja que totes elles funcionen malament (per això el programa de Microsoft en la versió 8 dóna la opció de vista de compatibilitat, ja que són conscients dels problemes que donen a la gent en la visualització de webs). En certs casos, podem estar en un problema perquè certes tecnologies no acaben de funcionar, perquè ens fa renderitzats lletjos, perquè no accepta PNGs transparents sense ús de JavaScript, perquè és lent, perquè no accepta noves funcions CSS3 que estalvien l'ús de imatges... Es podria seguir, però tampoc és el tema del post totes les contres que pot tenir aquest navegador (per altra banda el més usat pels internautes, tot s'ha de dir). Anem al tema principal, Google, ha tret Chrome Frame, el qual ens permet que el navegador Internet Explorer funcioni amb el motor de Chrome. L'he provat i realment funciona molt bé. A més, segons els de la G, funciona a partir de Windows XP SP2 i Internet Explorer 6. Si tenim problemes amb la visualització d'aquest navegador, podem posar un avís (un dia d'aquests penjaré com detectar si Chrome Frame està activat o no) dient que els usuaris amb aquest navegador s'instal·lessin el plugin següent.

    Per a que això funcioni, caldrà posar la següent línia en els nostre head:
    1. <meta content="chrome=1" http-equiv="X-UA-Compatible">
    A partir d'aquí quan algú entri a la nostra web, amb el navegador de Microsoft i el plugin instal·lat, veuran la web com si ho fessin amb el Chrome. Crec que pot ser de molta utilitat per tal de que la gent que funciona amb IE6 puguin veure la web tal com és i no amb la destrossa que els fa. Així mateix, recomano a tota la gent que usa el navegador de la companyia de Bill Gates que provi alternatives, que n'hi ha i de molt bones.]]>

    Per tots és conegut, com a mínim pels informàtics (i en concret desenvolupadors web), que Internet Explorer és un autèntic mal de cap, a part que és un dels navegadors amb pitjor suport als estàndards web i el funcionament de diverses tecnologies actuals, un dels que té pitjor seguretat, més temps de càrrega…

    A la web, hi ha moltes comparatives entre els diferents navegadors que podem triar actualment (Firefox, Chrome, Safari, Internet Explorer…). En la major part hi pots comprovar diferents característiques i enfocaments, des de les “menys tècniques”, les que comparen velocitats, les mes especialitzades… Però aquest post, no anirà d’aquest tema.

    En la major part dels casos, el desenvolupador ha de perdre un bon temps per a que es vegi per a tots els navegadors igual i en concret per a totes les versions d’Internet Explorer, ja que totes elles funcionen malament (per això el programa de Microsoft en la versió 8 dóna la opció de vista de compatibilitat, ja que són conscients dels problemes que donen a la gent en la visualització de webs).

    En certs casos, podem estar en un problema perquè certes tecnologies no acaben de funcionar, perquè ens fa renderitzats lletjos, perquè no accepta PNGs transparents sense ús de JavaScript, perquè és lent, perquè no accepta noves funcions CSS3 que estalvien l’ús de imatges… Es podria seguir, però tampoc és el tema del post totes les contres que pot tenir aquest navegador (per altra banda el més usat pels internautes, tot s’ha de dir).

    Anem al tema principal, Google, ha tret Chrome Frame, el qual ens permet que el navegador Internet Explorer funcioni amb el motor de Chrome. L’he provat i realment funciona molt bé. A més, segons els de la G, funciona a partir de Windows XP SP2 i Internet Explorer 6. Si tenim problemes amb la visualització d’aquest navegador, podem posar un avís (un dia d’aquests penjaré com detectar si Chrome Frame està activat o no) dient que els usuaris amb aquest navegador s’instal·lessin el plugin següent.

    Per a que això funcioni, caldrà posar la següent línia en els nostre head:

    1. <meta content=”chrome=1″ http-equiv=”X-UA-Compatible”>

    A partir d’aquí quan algú entri a la nostra web, amb el navegador de Microsoft i el plugin instal·lat, veuran la web com si ho fessin amb el Chrome. Crec que pot ser de molta utilitat per tal de que la gent que funciona amb IE6 puguin veure la web tal com és i no amb la destrossa que els fa. Així mateix, recomano a tota la gent que usa el navegador de la companyia de Bill Gates que provi alternatives, que n’hi ha i de molt bones.

    ]]>     http://openpitu.com/2010/09/27/google-chrome-frame-millorem-ie/feed/ 0     Torrific, client web BitTorrent http://openpitu.com/2010/09/26/torrific-client-web-bittorrent/ http://openpitu.com/2010/09/26/torrific-client-web-bittorrent/#comments Sun, 26 Sep 2010 23:27:23 +0000 Pitu Sabadí http://openpitu.com/?p=209

    De la mà de PixelcoBlog avui coneixo Torrific, que ens permet fer aquest tipus de descàrregues des del mateix navegador web. Aquesta funcionalitat que podem donar als navegadors pot ser molt útils en determinats moments que necessitem baixar un .torrent i no tinguem ni podem instal·lar cap client.

    Per usar aquest servei us haureu de registrar gratuïtament i podreu usar-lo introduint la direcció del fitxer. Podeu accedir a aquesta aplicació mitjançant la seva web.

    ]]>

    Els arxius .torrent són una bona alternativa alhora de baixar molts de programes de software lliure, tot i que s’ha popularitzat molt el seu ús per altre tipus de descàrregues. Fins al moment, només coneixia la possibilitat de fer aquestes descàrregues mitjançant un client que ens permetés baixar el programa complet.

    De la mà de PixelcoBlog avui coneixo Torrific, que ens permet fer aquest tipus de descàrregues des del mateix navegador web. Aquesta funcionalitat que podem donar als navegadors pot ser molt útils en determinats moments que necessitem baixar un .torrent i no tinguem ni podem instal·lar cap client.

    Per usar aquest servei us haureu de registrar gratuïtament i podreu usar-lo introduint la direcció del fitxer. Podeu accedir a aquesta aplicació mitjançant la seva web.

    ]]>     http://openpitu.com/2010/09/26/torrific-client-web-bittorrent/feed/ 0     Aplicació web per comprovar la qualitat de les contrassenyes http://openpitu.com/2010/09/08/aplicacio-web-per-comprovar-la-qualitat-de-les-contrassenyes/ http://openpitu.com/2010/09/08/aplicacio-web-per-comprovar-la-qualitat-de-les-contrassenyes/#comments Wed, 08 Sep 2010 10:32:10 +0000 Pitu Sabadí http://openpitu.com/?p=174

    A part de provar les meves contrassenyes n'he provat algunes i els resultats són els següents:

    • 1234 i asdf: Et diu que està entre les 500 contrassenyes més comunes
    • asdf1234: 3 dies
    • Contrassenya amb 2 nombres i 6 lletres: 3 dies
    • Contrassenya amb 2 nombres i 8 lletres: 11 anys
    • Contrassenya amb 3 nombres i 7 lletres: 11 anys
    • Contrassenya amb 2 nombres i 9 lletres: 417 anys
    • Contrassenya amb 3 nombres i 8 lletres: 417 anys
    Per tant podem deduir que les contrassenyes comencen a ser altament segures a partir de les 10 xifres combinant lletres i nombres. A partir d'aquí feu les vostres proves i si ho trobeu necessari, canvieu la vostra contrassenya. Enllaç a l'aplicació.]]>

    Avui en dia, tenim moltes contes a diversos portals d’Internet, i per tant no està de més, tenir una contrassenya suficientment segura per a no patir atacs inesperats. Molts llocsi altres aplicacions d’aquest estil et mostren quina és la qualitat de la teva contrassenya amb el típic semàfor de tres colors, representant dèbil, mitjana i robusta.

    La gràcia d’aquesta aplicació és que mentre vas escrivint la contrassenya et mostra el temps que trigaria un ordinador en desxifrar-la. Pots fer diverses proves i treure’n les conclusions que trobis oportunes de cara a triar una o altra contrassenya.

    A part de provar les meves contrassenyes n’he provat algunes i els resultats són els següents:

    • 1234 i asdf: Et diu que està entre les 500 contrassenyes més comunes
    • asdf1234: 3 dies
    • Contrassenya amb 2 nombres i 6 lletres: 3 dies
    • Contrassenya amb 2 nombres i 8 lletres: 11 anys
    • Contrassenya amb 3 nombres i 7 lletres: 11 anys
    • Contrassenya amb 2 nombres i 9 lletres: 417 anys
    • Contrassenya amb 3 nombres i 8 lletres: 417 anys

    Per tant podem deduir que les contrassenyes comencen a ser altament segures a partir de les 10 xifres combinant lletres i nombres. A partir d’aquí feu les vostres proves i si ho trobeu necessari, canvieu la vostra contrassenya.

    Enllaç a l’aplicació.

    ]]>     http://openpitu.com/2010/09/08/aplicacio-web-per-comprovar-la-qualitat-de-les-contrassenyes/feed/ 5     Less Framework 2 http://openpitu.com/2010/09/06/less-framework-2/ http://openpitu.com/2010/09/06/less-framework-2/#comments Mon, 06 Sep 2010 22:35:43 +0000 Pitu Sabadí http://openpitu.com/?p=171

    Less Framework 2 CSS3 ofereix:
    1. Dues columnes a 320px per a smartphones.
    2. Cinc columnes a 768px per a tablets i netbooks.
    3. Vuit columes a 1280px per a ordinadors de sobre taula i portàtils.
    Es pot provar des de la pàgina oficial. Gràcies a Pixelco Blog]]>

    Less Framework és un framework de desenvolupament web per a tot tipus de dispositius, també els mòbils. El què es pretén amb el seu ús, es que no s’hagi d’escriure CSS diferents per a cada una de les resolucions que s’utilitzaran. Com tots els FW, porta definides un conjunt de funcionalitats mínimes amb valors predefinits com poden ser les fonts o una reixeta (grid).

    Less Framework 2 CSS3 ofereix:

    1. Dues columnes a 320px per a smartphones.
    2. Cinc columnes a 768px per a tablets i netbooks.
    3. Vuit columes a 1280px per a ordinadors de sobre taula i portàtils.

    Es pot provar des de la pàgina oficial. Gràcies a Pixelco Blog

    ]]>     http://openpitu.com/2010/09/06/less-framework-2/feed/ 1     FireQuery, una extenció de Firebug per desenvolupar en jQuery http://openpitu.com/2010/08/29/firequery-una-extencio-de-firebug-per-desenvolupar-en-jquery/ http://openpitu.com/2010/08/29/firequery-una-extencio-de-firebug-per-desenvolupar-en-jquery/#comments Sun, 29 Aug 2010 12:52:04 +0000 Pitu Sabadí http://openpitu.com/?p=152 Doncs ara podem veure una extensió que uneix ambdues coses: amb FireQuery, podrem examinar els objectes generats per jQuery i jQeritzar la pàgina. Realment pot millorar les funcions de Firebug. Pots descarregar-te i instal·lar l'extensió des de la web oficial.]]>

    Actualment quasi tothom quan ha de desenvolupar en JavaScript, usa el framework jQuery. Així mateix, una de les bases per a qualsevol programador web és l’extensió del Firefox, Firebug.

    Doncs ara podem veure una extensió que uneix ambdues coses: amb FireQuery, podrem examinar els objectes generats per jQuery i jQeritzar la pàgina. Realment pot millorar les funcions de Firebug.

    Pots descarregar-te i instal·lar l’extensió des de la web oficial.

    ]]>     http://openpitu.com/2010/08/29/firequery-una-extencio-de-firebug-per-desenvolupar-en-jquery/feed/ 1