• Meneame
• Divoblogger
• Bitacoras
• Delicious
• Facebook
• Twitter

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.

• Meneame
• Divoblogger
• Bitacoras
• Delicious
• Facebook
• Twitter

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:

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

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

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

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

1. $(‘#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.

• Meneame
• Divoblogger
• Bitacoras
• Delicious
• Facebook
• Twitter

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:

1. <div class=”lightbox” id=”content”><div class=”W60p h400 scroll”>
2. <h2>El nostre contingut</h2>
3. <p>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.</p>
4. <p><a href=”#” title=”Close This Content Lightbox”>Tanca <span>X</span></a></p>
5. </div></div>

El css que ens faria falta:

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

• Meneame
• Divoblogger
• Bitacoras
• Delicious
• Facebook
• Twitter

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:

1. <script src=”http://www.google.com/jsapi”>
2. <script type=”text/javascript”>
3. google.load(“jquery”, “1.3.2″);
4. </script>

Mentre que per utilitzar el de Microsoft:

1. <script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js” type=”text/javascript”></script>

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

• Meneame
• Divoblogger
• Bitacoras
• Delicious
• Facebook
• Twitter

A la feina necessitava que diversos elements d’una pàgina web tinguessin el mateix event. Això es pot aconseguir amb la funció trigger de jQuery. Veurem el funcionament amb un exemple.

Primer de tot, cal definir una estructura html per poder veure el contingut, bàsicament, necessites dos divs per programar els events i un que mostrarà els resultats.

1. <div id=”div1″>DIV 1</div>
2. <div id=”div2″>DIV 2</div>
3. <div id=”div3″></div>

Un cop fet això, ja podem passar a programar els events:

1. $(document).ready(function() {
2. $(“#div1″).click( function () {
3. $(“#div2″).trigger(‘click’);
4. });
5. $(“#div2″).click( function () {
6. $(“#div3″).append( “CLICK FET!”);
7. });
8. });

D’aquesta manera, tant si clickes el div1 com el div2, el què s’executa és l’event de quan clickes el div2. Aquest és un exemple molt senzill i pot sembla que no sigui massa útil, però a vegades pot ser necessari fer alguna cosa així.

• Meneame
• Divoblogger
• Bitacoras
• Delicious
• Facebook
• Twitter

Fa uns dies, a desarrolloweb.com vaig llegir una notícia que feia respecte a aquesta utilitat. És de Yahoo i permet comprimir els fitxers JavaScript i CSS. Actua esborrant comentaris, blancs i canvia el nom d’algunes variables. D’aquesta manera redueix el tamany del fitxer i així mateix el seu temps de càrrega. Hi ha disponible una versió online per tal de no haver de tenir que executa la llibreria en Java.

Acabo de fer la prova amb la darrera versió de jQuery i l’ha comprimit un 53%, no està gens malament. Els cops que l’he provat em dóna bons resultats, però tingues present que sempre t’has de guardar el fitxer original si l’has programat tu, perquè genera un codi impossible de llegir, tot en una mateixa línia.

• Meneame
• Divoblogger
• Bitacoras
• Delicious
• Facebook
• Twitter

[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:

1. <body>
2. <div id=”content”></div>
3. </body>

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

1. <?php
2. $var1 = "hyds";
3. $var2 = "WICAST";
4. $var3 = "SMC";
5. echo $var1.".".$var2.".".$var3;
6. ?>

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

1. function get_variables_php(){
2. var object;
3. $.ajax({
4. async: false,
5. type: "post",
6. url: PHP_VARIABLE_PATH,
7. success: function( vars ){
8. object = get_object( vars );
9. // THE CODE THAT USE THIS OBJECT
10. }
11. });
12. }

La funció que acabem de veure utilitza:

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

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