Com usar Piwik amb Amazon CloudFront com a CDN

Aquesta entrada l’escric ja que m’he trobat en que hi ha poca informació de com usar l’Amazon CloudFront com a CDN de tipus Origin Pull (mirall).

Per tot el que he trobat sobre el CloudFront per internet era per usar conjuntament amb el servei de S3, que per el cas que el necessitava, no me servia per res. Fins i tot la documentació del CloudFront, t’explica com usar-lo juntament amb S3 (que nooo, que no és això que vull!!) Jo volia usar-lo per servir de manera ràpida el codi javascript d’analítica web Piwik, el qual tenc instal·lat a un servidor pròpi. Si, val, ho reconec, es una pijada 🙂

Que necessitem:

  • Una instal·lació de Piwik en un servidor accessible des d’internet (important, està clar).
  • Un compte de Amazon Web Services, validada.

Un cop tenim tot el que necessitem, ens donem d’alta al servei de CloudFront i pas a pas fem el següent:

Descàrrega de responsabilitats: Aquesta és la configuració que a mi m’ha anat be. No significa que pel teu cas sigui aquesta que hagis de seguir! No me faig responsable de cap mal funcionament!

  • Anem a la AWS Management Console i seleccionem el servei CloudFront.
  • Click al botó “Create distribution
  • Passa 1: Seleccionem el mètode d’entrega (Delivery Method). Per el nostre cas usarem el mètode Download.
  • Passa 2: Creació de la distribució (Create distribution).
  • Origin settings -> Origin Domain Name: Aquí posem la url de la instal·lació de Piwik del nostre servidor. (per Ex. piwik.domini.com) Origin ID -> s’auto completarà a partir de l’anterior camp. Després és editable. És un camp purament administratiu.
  • Default Cache Behavior Settings: Viewer Protocol Policy ->HTTP and HTTPS, Object Caching -> Use Origin Cache Headers, Forward Cookies -> All, Forward Query Strings -> Yes
  • Distribution Settings: Price Class -> Use All Edge Locations, Alternate Domain Names (CNAMEs) -> Aquí podem posar els diferents CNAMEs que creem a la nostra zona de DNS apuntant a la URL que, un cop finalitzada la configuració, ens proporcionaran, Podem crear-ne fins a un màxim de 10 (per exemple cdn1.piwik.domini.com), Default Root Object ->(buid), Logging -> Off, Comment -> (buid), Distribution State -> Enabled
Just a la dreta de cada un dels camps hi ha una icona d’informació, que si la pitjam, ens mostrarà per a que serveix cada camp i podrem triar el valor més adequat.

Un cop editats tots els camps, pitjem el botó “Create distribution” i ja ho tendrem. Seguidament ens mostrarà la consola de CloudFront amb les diferents distribucions que tinguem configurades. Cal dir que tarda uns minuts en estar actiu, ja que s’ha de desplegar per tota la xarxa de servidors de AWS.

Veurem que ens faciliten un nom de domini, un tant mal de recordar, del tipus [numeros-i-lletres].cloudfront.net, per això ens donen la oportunitat de crear àlies (CNAMEs), com l’exemple que hem posat cdn1.piwik.domini.com.

Com crear els CNAMEs?

Fàcil, s’ha d’accedir al panell de control de la zona de DNS, pot ser no tenguis a questa opció. Si no la tens, t’has de posar en contacte amb l’administrador del teu servei i demanar-li que els crei a la zona que li indiquis.

Posem un exemple:

Tenim el domini piwik.domini.com aquest és el domini de la instal·lació del piwik i el domini que ens han proporcionat per usar el CloudFront [numeros-i-lletres].cloudfront.net

A la zona de DNS creem noves entrades de tipus CNAME, per exemple

cdn1.piwik CNAME [numeros-i-lletres].cloudfront.net.

cdn2.piwik CNAME [numeros-i-lletres].cloudfront.net.

cdn3.piwik CNAME [numeros-i-lletres].cloudfront.net.

Podem crear tantes CNAME com volguem, però el CloudFront només n’accepta un màxim de 10.

Noteu el punt final després de cloudfront.net, es important posar-lo, si no la url vos quedaria [numeros-i-lletres].cloudfront.net.domini.com. per tant no funcionaria correctament.

Un cop finalitzada la configuració de la zona, s’ha de deixar propagar els DNS i posar els CNAME a la configuració del CloudFront. Important aquesta passa, ja que si no les tenim afegides a la configuració del CloudFront, no funcionarà l’invent.

Com hem vist, jo també :D, és molt fàcil de configurar.

Els pros i contres del JavaScript i jQuery

Anem a definir, amb poques paraules, el que és JavaScript, d’on ve i que podem fer amb ell.
JavaScript és un llenguatge interpretat pels navegadors, que s’usa per a la programació web (validació de dades per part de la capa client, millora de l’experiència d’usuari, …). Inicialment, es va anomenar LiveScript i fou inventat per enginyers de Netscape, més endavant es va re-anomenar a JavaScript. Molta gent deu pensar, o pensa, que el nom de JavaScript te a veure amb el llenguatge de programació Java, però, sincerament, només tenen de parescut el nom, res més.

Durant els darrers anys JavaScript s’ha tornat molt popular entre els programadors web.

Quins usos li podem donar al JavaScript? doncs, com hem començat a introduïr-ho més amunt. Passarem a enumerar unes quantes:

  • El podem fer servir per validar dades
  • Per millorar l’experiència d’usuari (cosetes que es mouen per la pàgina, efectes xulixaxis 😀 ).
  • També per el tan anomenat AJAX, que, no és més que, enviar dades a un servidor i pintar-les, o no, per pantalla.
  • Detecció del navegador que s’està usant
  • Manipulació de cookies
  • Analítica web,…

Ara que sabem el que podem fer, anam a llistar els Pros i Contres del Javascript

Pros:

  • Rendiment: El JavaScript s’executa íntegrament en el navegador del client salvant temps de peticions i d’amplada de banda del servidor web.
  • És un llenguatge d'”scripting” lleuger i relativament fàcil d’aprendre.
  • Com hem dit abans, s’executa al navegador del client, per això el resultat i el procés es relativament ràpid.
  • Es poden usar extensions de tercers per comprobar els fragments de codi.

Contres:

  • En temes de seguretat, executant codi JavaScript maliciós, podria fer-se servir per aprofitar errades del navegador i fer-se amb el control de l’ordinador.
  • En temes d’interpretació, cada navegador interpreta el JavaScript d’una manera diferent.

Ara passem a definir el que és jQuery. jQuery és una llibreria dissenyada per simplificar la programació de JavaScript. El programador que usa aquesta llibreria, usa menys quantitat de codi sense que la funcionalitat es vegi alterada.

Cal dir que a part de jQuery hi ha altres llibreries que ens poden ajudar a la programació amb JavaScript, tals com Mootools, Dojo, Prototype, … Unes més orientades a efectes visuals i d’altres més orientades a manipulació de la página.

Anem a posar un exemple de codi de Javascript i jQuery, que fan exactament el mateix. Volem el valor d’un element:

JavaScript:

document.getElementById('idElement').value;

jQuery:

jQuery('#idElement').val();

A vegades podem trobar-ho escrit de la següent forma, ambdues fan el mateix:

$('#idElement').val();

Com podem veure, amb el jQuery escrivim menys i és més fàcil de recordar. Podem dir que el jQuery ens ofereix un “Syntactic Sugar” per a la programació JavaScript.

Anem a citar els Pros i Contres del jQuery:

Pros:

  • Amb jQuery ens oblidam de les compatibilitats entre navegadors. Amb un sol codi escrit, sabem que funcionarà a tots els navegadors suportats per la versió de jQuery que usem.
  • jQuery és fàcil d’usar en comparació amb altres llibreries i, es clar, que amb el propi JavaScript.
  • jQuery te una extensa llista de llibreries/funcions
  • jQuery te molt bona documentació i una gran comunitat.
  • jQuery suporta la funcionalitat AJAX. El JavaScript també, però hauriem d’escriure la funcionalitat per a cada navegador. jQuery amb un codi es suficient per fer-lo anar amb tots els navegadors.

Contres:

  • Ja no escriurem codi nadiu JavaScript, ens hem de limitar a usar les funcions de la llibreria.
  • Es necessari incloure un fitxer per poder usar la funcionalitat.

En resum, no hi ha res que sigui bò o dolent, simplement és diferent.

Com a opinió personal, usar jQuery facilita molt la tasca de programació i a més, per la gran comunitat que té, es molt fàcil trobar com fer una acció desitjada.

Article traduït lliurament de The Pros and Cons of JavaScript and jQuery | JavaLobby DZone.

Com crear un llistat de categories a partir d’una categoria pare – WordPress

Anirem a mostrar com fer un llistat de categories a partir d’una categoria pare, per a WordPress.
Ho teniu penjat a github:gist.

És fàcil d’entrendre. Primer capturem el nom de la categoria, seguidament, amb el nom desat a $catname, ho passem com a paràmetre a la funció get_category_by_slug($catname), que ens retornarà un objecte del tipus categoria. Com a darrera passa executarem wp_list_categories("orderby=id&show_count=0&use_desc_for_title=1&child_of=$idObj->term_id"); que ens mostrarà les categories filles de la categoria seleccionada.
El paràmetre del mètode wp_list_categories() pot variar:

  • orderby: Ordena el llistat. Pot ser id o name, segons el que necessitem en cada moment
  • show_count: 1 o 0 Mostrarà o no el número d’entrades de cada categoría.
  • use_desc_for_title: 1 o 0 S’usarà o no, la descripció de la categoría per a l’atribut title de l’enllaç
  • child_of: Id de la categoria pare

Podem trobar més info a wp_list_categories()

El mètode wp_list_categories() torna els enllaços entre etiquetes <li></li> per això el mètode està entre <ul></ul>

Nota:Es necessari que alguna entrada tingui les categories assignades, ja que si no no es mostrarà.

Com crear límits (bounds) amb la API de Google Maps v3

A la feina necessitava posar a un mapa varis punts i seguidament fer un zoom i centrar la vista en el centre d’aquests punts.
Per això esto he utilitzat la següent funció javascript, que m’he creat. Es necessaria la crida a l’API de google maps versió 3.

Com podeu veure, és facileta, sols guardam en unes variables la latitut i longitut màximes, latitut i longitut mínimes, amb les que crearem els punts per l’objecte bounds, el qual es una parella d’objetos latln. Uno serà el punt SO, el de latitut longitut mínims i l’altre serà el punt NE, el de latitut longitut màxima.
El paràmetre list és un array de JSON on tenim les diferents dades del punt a afegir, tals com la latidut i longitut.
Una vegada creat el bound, simplement hem de pasar-lo al mapa. Ho podem fer de la següent forma:

var map, bounds;
map = new google.maps.Map(div, opts); /* div es l'objecte en el que es pintarà el mapa. opts son les diferents opcions del mapa */
bounds = createBounds(list);
map.fitBounds(bounds);

No és necesari fer un map.setCenter(), perque ja ho fa automàticament el fitBounds.

Destroy the web! plugin per firefox per passar una bona estona

L’altre dia passejant pel directori de plugins de mozilla, ens toparem amb un que té un nom un tant apocalíptic Destroy the web! i clar, que ferem? el varem instal·lar es clar! xD

Es un plugin productivity-killer com dirien els entesos. Vaja que no serveix per fer feina. No es més que un joc per passar l’estona entre compilació i compilació, o una estoneta més 😉

Quan l’activem el cursor es converteix amb un punter d’escopeta i cada clic va destrossant els elements html que troba pel mig. Cada un té un valor diferent. tens 30 segons per destruir tots els elements que puguis i com més punts facis més amunt del ranking internacional estaràs.

Qui el vol provar?? au idò cap a mozilla!!!

Vull poder triar Santa Maria del Camí, Illes Balears al Face

Així resa el nom del grup que vaig crear el passat més de desembre. El perquè d’aquest grup, doncs clarament es per poder triar on vivim a Santa Maria del Camí, Illes Balears,
Ara mateix només podem triar Santa Maria del Camí, Catalunya.

Una petita recerca a geonames, ens mostra els dos pobles, amb els seus atributs (país, classe, lat i long). Santa Maria del camí, Illes Balears, te dues entrades una com a zona poblada (populated place) i un altra com a divisió administrativa de tercer ordre (third-order administrative division). Amb aquesta comparació vull dir, que a geonames, que el nostre poble te més importància, crec jo, administrativa.

L’única solució que dona facebook es que facem una petició mitjançant aquest formulari de Petició Regional, nom molt descriptiu 🙂

Anima’t a participar!!

iBook G4 12” en venda

Hola a tothom
Després d’un temps de no escriure res :P,  ja torn a ser per aquí.
Com be diu el títol, pos a la venda el meu iBook G4 12″, funciona perfectament, podeu veure les especificacions tècniques a la web l’apple.
El vaig comprar el novembre del 2005 i la bateria es nova de l’any 2008. De memòria RAM te 1,5GB duu un mòdul de 1GB de crucial techology.
S’entregarà amb la capsa original i tots els cables i paperassa que duia.

[IbookG4]

[IbookG4]

[IbookG4]

[IbookG4]

[IbookG4]

El preu que el pos a la venda es de 350€ (mes o manco es el que en demanen per eBay)
Si es fora de mallorca, les despeses d’enviament van a carrec del comprador
Si algú està interessat / interessada posau-vos en contacte:

  • correu: benetj_arroba_gmail.com
  • missatge directe de twitter a l’usuari @kuratowsky
  • Comentari en aquest post amb el vostre correu ben posat

Apuntat al Premiweb 2010

De la mà de Balearweb.com, l’any que ve tornen els premis web. Es molt fàcil apuntar-s’hi.
Simplement anem a premiweb.cat, cream un usuari hi podem donar d’alta la nostra pàgina i/o nominar alguna altra que ens agradi, sempre i quan compleixi les bases.

Una vegada creada la nominació podem enllaçar directament a ella per així poder deixar un comentari i votarla.

Si vos animeu, ho podeu fer amb aquest bloc 😀


Vota'ns al Premi Web 2010

Animau-vos a votar!!!