open-pitu, el blog lliure en català » Programació

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.

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.

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.

Less Framework 2

Pitu Sabadí — Mon, 06 Sep 2010 22:35:43 +0000

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:

Dues columnes a 320px per a smartphones.
Cinc columnes a 768px per a tablets i netbooks.
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

FireQuery, una extenció de Firebug per desenvolupar en jQuery

Pitu Sabadí — Sun, 29 Aug 2010 12:52:04 +0000

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.

PHP.JS, les funcions PHP en JS

Pitu Sabadí — Sat, 28 Aug 2010 12:04:03 +0000

De la mà de Desarrolloweb he trobat aquesta llibreria JS que ens pot anar bé quan estem programant en JS i necessitem algunes funcions pròpies de PHP. Es tracta d’un projecte de codi lliure que pretén donar a JS la potència del PHP. Com és normal no totes les funcions de PHP es poden passar a JS.

Podeu trobar la API de la llibreria a la web oficial del projecte. Personalment encara no l’he provat, però no tardaré en mirar-me detalladament l’ús d’aquestes funcions, la seva utilitat i, si és un projecte pràctic i útil, no dubtaré en fer algun altre post ensenyant el seu ús. Podeu baixar-vos les llibreries a la web oficial en diverses versions, segons la que més us convingui.

Per posar un exemple he estat mirant com han traduït la funció SETCOOKIE:

setcookie(‘SO’, ‘Linux’);

Aviat ho provaré i ja comentaré més detalladament com funciona i si realment ens pot estalviar bastant feina que fins ara havíem de fer nosaltres.

Degradats de fons només amb CSS

Pitu Sabadí — Mon, 16 Aug 2010 19:57:34 +0000

En el disseny web, treballar amb imatges és bastant feixug, i en la major part dels cops és millor usar propietats CSS. Fins al moment sempre que volia fer algun fons amb un degradat el feia creant la imatge, cosa que genera una sèrie d’inconvenients que molts de nosaltres hem anat patint.

Avui, buscant alguna alternativa amb només CSS, he trobat una solució prou bona que funciona amb els tres navegadors:

background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#000000));
background: -moz-linear-gradient(top, #ccc, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′);

La primera línia és per a Chrome i Safari, la segona per a Firefox (cal que sigui la versió 3.6 o superior) i la darrera per a Internet Explorer.

Espero que us sigui d’utilitat.

Millora la llegibilitat amb CSS

Pitu Sabadí — Thu, 08 Jul 2010 23:00:44 +0000

La llegibilitat és un conjunt de característiques que fan que un text o tipografia sigui més fàcil de llegir. Aquesta propietat es pot millorar amb diverses tècniques. Avui em centraré amb la propietat CSS text-rendering, que va introduir Firefox3.0 i que ara també usen els sistemes basats en webkit (Safari i el gran Chrome).

Com tota propietat CSS podem donar-li diferents valors, per tal de que actuï d’una o altra manera:

optimizeLegibility: Dóna prioritat a la llegibilitat del text. Habilita kerning i lligadura de tipografia.
auto: Per defecte usa el valor anterior per a lletres menors de 10px i el següent per a majors.
optimizeSpeed: Dóna prioritat a la velocitat amb la qual es mostrarà el text.
geometricPrecision: Dóna prioritat a la geometria del text.

Per tant la podem usar tal i com utilitzem qualsevol propietat CSS i podem jugar amb les diferents prioritats per tal de trobar un bon equilibri a la web. Per exemple:

#id_element, .classe_element{
text-rendering: auto;
}

Un cop més, i com normalment ens té acostumats, és una propietat que no funciona amb Internet Explorer de Microsoft. Esperem que mica en mica el món web es vagi unificant i es segueixin els estàndards que es van marcant.

Events personalitzats amb jQuery

Pitu Sabadí — Tue, 29 Jun 2010 16:53:37 +0000

El disseny d’interfícies per a aplicacions d’escriptori, típicament s’ha fet a partir de la generació d’events per part d’uns elements i de la seva captura per part d’uns altres. En el projecte en el que estic a la feina, estem fent una nova arquitectura més modular. Algunes aplicacions web, ja comencen a tenir moltes propietats, i la programació dels events Click, Hover… són d’ús quotidià.

A vegades però, amb aquests events estàndards no n’hi ha prou, i és necessari programar events propis d’una component, per tal de que pugui ser llançat amb total independència des d’un altre component (i no haver de cridar una funció concreta). Per fer això jQuery ens dóna la solució.

Primer de tot veurem com generar un nou event:

$(‘#el_nostre_div’).bind(‘el_nostre_event’, function(){
alert(‘Acció del nostre event!’);
});

Per llançar aquest event des d’un altre component podem fer:

$(‘body’).trigger(‘el_nostre_event’);

Finalment, a vegades ens pot interessar eliminar un event que havíem programat:

$(‘#el_nostre_div’).unbind(‘el_nostre_event’);

Amb aquestes tres porcions de codi, ja podem generar, llançar i eliminar events personalitzats i generar interfícies tal i com es fa amb les aplicacions d’escriptori però en el món web.

Lightbox fet amb semàntica CSS3

Pitu Sabadí — Sun, 27 Jun 2010 23:46:57 +0000

Ja fa dies, vaig veure aquest article en el qual s’explicava com aconseguir un producte semblant al que obtenim amb Lightbox o Shadorbox però només en CSS i, evidentment, prescindint dels bonics efectes (o no) que poden fer les dues llibreries esmentades.

Podeu veure un exemple en viu del resultat que han obtingut i fer-te una idea de què podries arribar aconseguir només amb CSS i quan fora necessari l’ús del JavaScript.

Segons l’article original, s’està arribant a un ús inadequat de JavaScript, amb frameworks com jQuery, ja que donen uns resultats excel·lents a la vista. Tot i aquest darrer motiu, troben necessari donar una solució a aquest problema i per això mostren com fer-ho per als fanàtics del CSS.

Anem a veure una mica el codi que utilitzen. Anem al gra, és a dir, veurem com cal declarar el div que volem que formi el “Lightbox” i com definir els estils CSS per a que actuï de la manera desitjada.

Primer l’html:

El nostre contingut
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis felis suscipit tellus euismod varius quis ut nibh. Curabitur in ante nunc, vitae venenatis dui.
Tanca X

El css que ens faria falta:

html, body { height: 100%; overflow: hidden; width: 100%; margin: 0; padding: 0; }
body { overflow-y: auto; }
.lightbox { left: -999em; position: absolute; }
.lightbox:target { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
.lightbox:target .close a { background: rgba(0, 0, 0, 0.75); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }
.close span { color: #FFFFFF; font-size: 2em; text-indent: 0; position: absolute; right: 0.5em; top: 0.5em; }
.close {text-indent: -999em;}

A nivell general aquest seria el secret per tal d’aconseguir el lightbox, tot i que no s’acaba aquí i, si ho vols utilitzar el recomano que vagis a Pixelovers i segueixis un per un els passos que expliquen, per tal d’aconseguir un bon funcionament amb tots els navegadors.

Accelera la càrrega de jQuery amb un CDN

Pitu Sabadí — Sat, 26 Jun 2010 12:03:54 +0000

El framework de jQuery és un dels més estesos actualment a molts sites d’Internet. Una bona recomanació a tota la gent que l’usa és que carregui la llibreria des d’un CDN (Content Delivery Network). Un CDN és un grup de servidors repartits per tot el món, distribuïts en llocs estratègics i pensats per a la distribució de fitxers. N’hi ha diversos, entre els que podem destacar el de Google, Microsoft o Edgecast, ja que són gratuïts.

Funcionament d'un CDN

Tal i com expliquen a Pixelovers, podem usar el CDN de Google de la següent manera:

Mentre que per utilitzar el de Microsoft:

Usar un CDN per a la càrrega de llibreries té un conjunt d’avantatges:

Alliberar al nostre servidor de càrrega de llibreries externes
Incrementa les possibilitats que els fitxers estiguin a la cau del navegador.
Un CDN segurament serveix el fitxer més ràpidament que el teu servidor.

Per tal d’escollir quin CDN utilitzar, el millor seria usar el més utilitzat, ja que seria la manera més fàcil que ja estigués a la cau, però com que no es disposa aquesta informació es tracta de triar, per exemple, el que vagi més ràpid. Aquí deixo aquesta gràfica per a que vosaltres mateixos escolliu quin usar:

Comparativa de CDNs

PHP i JavaScript no intrusiu

Pitu Sabadí — Mon, 21 Jun 2010 08:32:50 +0000

[How-to del blog antic.]

Últimament està molt de moda el concepte Scripts no intrusius. Per a que un script es pugui considerar no intrusiu ha de tenir una sèrie de característiques. Ha de ser usable, legible i en la mesura que es pugui accessible (ja s’entén que no sempre pot duncionar tot amb JS desactivat). A més, cal tenir separada l’estructura, dels scripts i dels estils, ja que així tot és més mantenible.La idea principal si parlem de JavaScript és que per a que l’script funcioni només calgui incloure el fitxer.js i ja tot passi a funcionar, sense que hi hagi la necessitat de fer crides a funcions JavaScript des del fitxer de l’estructura (html, php…).

En aquest how-to ens centrarem com podem obtenir des d’un fitxer JavaScript el valor de diverses variables que controlem/calculem des del PHP. A continuació s’explica el contingut principal de l’exemple.Primer de tot veurem l’estructura del body del document d’exemple:

A continuació l’estructura de dades que obtenim des de php:


 $var1 = "hyds";
 $var2 = "WICAST";
 $var3 = "SMC";
 echo $var1.".".$var2.".".$var3;
?>


Finalment veurem com obtenir aquestes variables i fer les crides que  necessitem:

function get_variables_php(){
 var object;
 $.ajax({
 async: false,
 type: "post",
 url: PHP_VARIABLE_PATH,
 success: function( vars ){
 object = get_object( vars );
 // THE CODE THAT USE THIS OBJECT
 }
 });
}

La funció que acabem de veure utilitza:

function get_object( vars ){
 vars = vars.split(\'.\',3);
 this.var1 = vars[0];
 this.var2 = vars[2];
 this.var3 = vars[3];
 return this;
}

A partir d’aquí es podria fer definint els events que desitjem per a què  actuï tal i com necessitem fent les crides en funció d’aquestes  variables. El link de referència ens porta a un post de Cristal Web  titulat: “Javascript no intrusivo, CSS y PHP”. Es tracta de literatura  per iniciar-se en el concepte de “Unobtrusive Scripting”.



Cerca Dicotòmica
Pitu Sabadí — Mon, 21 Jun 2010 08:14:04 +0000
Meneame
Divoblogger
Bitacoras
Delicious
Facebook
Twitter

[How-to del blog antic.]
Algorisme de cerca en un vector. Una cerca dicotòmica necessita l’entrada ordenada. A grans trets, el que fa és dividir en dos el vector i seguir buscant en el tros de vector on pot estar el nostre valor.
#include 
#include 
#include "stdlib.h"
using namespace std;
static void mostra_taula ( vector& t ) {
	int i = 0;
	while( i < t.size() ){
		cout << t[i] << " " ;
		i++;
	}
	cout << endl;
}
static void fusiona( vector& t, int inici, int mig, int fi) {
    vector aux(fi - inici + 1);
    int i = inici; // index part esquerra del vector
    int j = mig + 1; // index part dreta del vector
    int k = 0; // index del vector aux
    //mentre no acabi cap index de t, l'element mÃ©s petit es copia al vector aux
    while ( i <= mig and j <= fi ) {
        if ( t[i] < t[j] ) {
            aux[k] = t[i];
            ++i;
        }
        else {
            aux[k] = t[j];
            ++j;
        }
        ++k;
    }
 	//cas en quÃ¨ un vector ja s'ha copiat al complert
    while (i <= mig) {
        aux[k] = t[i];
        ++i;
        ++k;
    }
    while (j <= fi) {
        aux[k] = t[j];
        ++j;
        ++k;
    }
    // copia els elements guardats a aux a t
    for (int n = 0; n < aux.size(); ++n){
       	t[inici + n] = aux[n];
    }
}
static void merge_sort( vector& t, int inici, int fi) {
    if ( inici < fi ) {
        int mig = ( inici + fi ) / 2;
        merge_sort( t, inici, mig);
        merge_sort( t, mig + 1, fi);
        fusiona( t, inici, mig, fi);
    }
}
static int cerca_dicotomica( vector t, int x, int l, int tamany ){
	int m = (l + tamany)/2;
	if( l== tamany-1 )
		return l;
	if( x < t[m] )
		return cerca_dicotomica( t, x, l, m );
	else
		return cerca_dicotomica( t, x, m, tamany);
}
int main () {
  	//MODIFICA LA VARIABLE TAMANY PER DONAR MIDA A LA TAULA.
	int tamany = 8;
	//MODIFICA ELS DOS NOMBRES DONATS
	int x = 2;
	int y = 3;
	//ES GUARDA EL RESULTAT A LA VARIABLE
	int resultat;
	int resultatX, resultatY;
	//VECTOR AMB EL QUE ES TREBALLA
	vector taula( tamany );
	int i = 0, aux;
	for (int i=0; i