Estadístiques de browsers
Us presento un interessantissim link per a que sapigueu quines son les tendències en l’ús de navegació de usuaris. Aqui podreu veure tant usos com navegadors, sistemes operatius, resolució de pantalla, i profunditat de colors. Sens dubte es una informació supernecessària per a sapiguer amb quin espai comptem per a dissenyar un website (o qualsevol aplicació per a desktop).
Com funcionen/funcionem els programadors
Mai m’he considerat programador, tot i que hem passo el dia escribint linies i linies de codi, tot un misteri la contradicció, però com deia el Pujol: “Català és tot aquell qui es sent Català”, o algo així. La qüestió és que quan jo treballava al CISS, ja fa uns quants anys teniem penjat un poster a la paret i curiosament aquesta setmana m’ha arribat el típic email conyon sobre programadors i/o informàtics i hi anava adjuntada una imatge amb el mateix poster. Així que no he pogut evitar penjar-lo aquí:
IOzone – estadístiques d’accés a disc
El IOzone és una utlitat d’estadístiques dels accessos a disc. Les operacions que monitoritza són les següents:
Read, write, re-read, re-write, read backwards, read strided, fread, fwrite, random read, pread ,mmap, aio_read, aio_write
Podem fer cosetes tan mones com aquestes:
Quin IMEI tinc?
Com saber l’IMEI del telèfon sense treure la bateria?
Només cal escriure això al mòbil: *#06#
Si algú sap com saber l’identificador de la targeta SIM sense treure la targeta i mirar el númoero que m’ho digui, per cert, algú sap com es diu aquest número que se m’ha oblidat?
Problema dels PNG transparents amb IE
Continuant amb el tema de les transparències i els .png, doncs resulta que el títol del portal que abans era un .gif ara és un .png, igualment amb la transparència necessaria perquè es vegi el color de fons de la pàgina. El que passa és que aquest .png ja no es veu bé amb IE, com sempre per raons incomprensibles de M$. Així doncs el Law, creador de la imatge del títol, m’ha passat un petit javascript que soluciona el problema.
Primer de tot el que hem de modificar és on es crida la imatge, per exemple:
<img src="path/imatge_transparent.png" onLoad="fixPNG(this)" />
La funció fixPNG concretament té aquest codi JavaScript:
function fixPNG(myImage){
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgID + imgClass + imgTitle
strNewHTML += " style=\"" + "width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle + ";"
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}
Si no volem deixar aquest codi enmig del codi HTML/xHTML, podem guardar aquesta funció, per exemple, en el fitxer titol.js i després incrustar-la al meta-codi així:
<script type='text/javascript' src='path/titol.js'></script>
Moltes gràcies, LAW!
Mini-guia de com usar l’ImageMagick
Es tracta de manipular imatges a través de la línia de comandes, la potència de l’Imagemagick és brutal, així doncs aquí no veurem ni l’1% de tot el que és capaç de fer. Però intentaré fer una petita guia amb algunes funcions força útils. Si voleu aprofundir més amb el tema: Examples of ImageMagick Usage (version 6). Concretament les eines del Imagemagick que usaré són el convert i el composite. Els textos que veureu a continuació estan inspirats també en un parell d’articles d’IBM: Graphics from the command line i l’altre: More graphics from the command line.
Sempre usem la mateixa imatge origen en tots els exemples: (mussols.jpg)
Creem marcs a les imatges
Creem un marc amb una doble ralla negre i un fons blanc de 3pixels entre les dues ralles negres d’1pixel al voltant de la imatge origen.
Codi:
convert -mattecolor black -frame 1x1 mussols.jpg mussols-11.jpg convert -mattecolor white -frame 3x3 mussols-11.jpg mussols-12.jpg convert -mattecolor black -frame 1x1 mussols-12.jpg mussols-13.jpg
Resultat:
Haureu vist que al portal uso un codi CSS que em fa apareixer un marc de color gris a una distància de 4 pixels del contorn de la imatge. Doncs bé a continuació us explico com podriem incrustar aquest marc en la propia imatge.
Codi CSS que uso per fer l’efecte:
.imatge img {background-color: #fff;border: 1px solid #a9a9a9;margin: 5px 5px 5px -5px;padding: 4px;line-height:0px;}
Com fer-ho amb Imagemagick:
convert -mattecolor white -frame 4x4 mussols.jpg mussols-7.jpg convert -mattecolor "#a9a9a9" -frame 1x1 mussols-7.jpg mussols-8.jpg
Resultat:
Per acabar amb el tema dels marcs, com arrodonir els contorns de la imatge i a més afegir un contorn blanc de 4px i un marc gris d’1px. Aquesta tècnica l’he tret d’un document anomenat: Cutting up Images.
Codi: ( ronded-ne.png, ronded-nw.png, ronded-sw.png i ronded-se.png )
composite -gravity NorthEast rounded-ne.png mussols.jpg mussols-1.jpg composite -gravity NorthWest rounded-nw.png mussols-1.jpg mussols-2.jpg composite -gravity SouthWest rounded-sw.png mussols-2.jpg mussols-3.jpg composite -gravity SouthEast rounded-se.png mussols-3.jpg mussols-4.jpg convert -mattecolor white -frame 4x4 mussols-4.jpg mussols-5.jpg convert -mattecolor "#a9a9a9" -frame 1x1 mussols-5.jpg mussols-6.jpg
Resultat:
Escribint sobre una imatge
Simplement vull afegir una nota de l’autoria i la llicència (autor: Mussols i llicència:”Creative Commons”) de la foto a la part inferior dreta de la imatge, amb lletra arial i mida 20, amb una separació de 2px per sota i per la dreta del marc de la foto.
Codi:
convert -font /usr/X11R6/lib/X11/fonts/truetype/arial.ttf -fill white -pointsize 20 -draw 'gravity SouthEast text 2,2 "(cc) Mussols"' mussols.jpg mussols-9.jpg
Resultat:
Canviant la mida de les imatges (resize & scale)
Una altre cosa que necessitava fer era canviar de mides les imatges, però sense perdre la geometria de les mateixes. Això ho he trobat al document ImageMagick v6 Examples — Resize or Scaling.Podem mirar aquest exemple, agafem com sempre la imatge origen ‘mussols.jpg’:
convert -resize 320x320 mussols.jpg mussols-10.jpg
Resultat:
Això no converteix la imatge a 320×320 sinó a 320×240 que és la proporció real de la imatge origen. O sigui que no perd la geometria de la imatge origen. Això és molt útil, perquè podem posar 1024×768 per exemple, i no tindrem mai una imatge més ampla de 1024 ni més alta de 768. Per imatges que han de ser usades en aplicatius que corren sobre una pantalla pot ser molt útil.
També hi ha formes de perdre la gemotria però pel meu cas no era necessari, així que no ho he comentat, però ho podeu mirar al document que he referenciat més amunt i trobareu com fer-ho.