En una propera ocasió ja parlaré en detall del tema de les resolucions, però el que hem de tenir clar és que el concepte resolució és un dels aspectes més important que determina la qualitat final d’una imatge digital, basicament com més resolució més qualitat i a menys resolució menys qualitat.

Ara bé, la quantitat de resolució afecta directament al tamany final del fitxer que emmagatzema la nostra imatge digital i en ocasions, sobretot en el cas de les webs, ens interessa que aquest fitxer ocupi el mínim possible perquè es descarregui prou ràpidament i alhora gasti el mínim d’espai de disc del nostre allotjament web.

Per aixó és habitual que alhora de preparar una imatge, a més a més d’ajustar-la al tamany que ens cal, ajustem la resolució d’acord al seu destí final.

Per una web, no cal que les imatges tinguin més 72 pícsels per pulçada, ja que es veuran en un monitor, i aquesta resolució en un monitor és suficient perquè la imatge mostri la qualitat necessària. Una resolució superior nomes serviria per tenir imatges més grans i que triguen més a processar-se.

Un cas a banda és si la imatge ha d’acabar impresa en paper amb una impressora de sobretaula o en una impremta òfset, d’això, com dic ja en parlaré en detall en una propera ocasió.

Realitzar aquests ajustos en el Gimp és ben senzill: Obrim la imatge que ens interessa modificar i anem al menú IMATGE/Escala la imatge …

1- Aquí indiquem la nova mida, en pícsels. Cal tenir en compte que a nivell de qualitat d’una imatge sempre es millor reduir que ampliar, per això el recomanable, dins les nostres possibilitats, treballar sempre amb la imatge original al tamany més gran possible, i fer les versions reduïdes que ens calgui.

2- Si tenim activada la icona de la cadena, Gimp calcula automàticament les proporcions i per tant nomes ens cal posar la mida del costat que desitgem: Amplada o Alçada. Si la cadena la desactivem amb un clic de ratolí, no es fa el control de proporcions i llavors estarem estirant o aixafant la imatge.

3- Aquí Gimp ens mostrara la resolució actual de la imatge que estem editant. Si ja esta en la resolució que volem, no cal tocar res. En aquest exemple esta a 72ppp (pícsels per pulçada) i com que la volem posar a la web ja ens va bé.

Una vegada indicades les noves mides/resolució nomes ens cal fer clic al botó ESCALA i Gimp fa la transformació.

Una variació d’aquest procés és la modificació de la superfície d’una imatge. La diferencia és ben clara malgrat que a vegades pot confondre.

Modificar la superfície d’una imatge NO ESCALA o REDUEIX la imatge en si, nomes amplia o retalla l’espai disponible per “pintar”. És com si fem més gran o petit un full de paper, això no altera les dimensions del que hi tinguem pintat.

En canvi, com hem vist abans, modificar el tamany de la imatges si que ESCALA el seu contingut

Per ampliar o reduir la superfície de la imatge, tornem al menú IMATGE, peró a l’opció MIDA DE LA IMATGE …

1-Aquí indiquem les noves mides, Gimp ampliara la superfície de la imatge des de la seva mida actual fins a la nova mida que indiquem. Observa que també tenim la icona de la cadena pel tema de les proporcions.

2- En aquest apartat anomenat Desplaçament podem indicar per quin costat s’afegeix superfície a la imatge

3- Vista prèvia de com es modificara la superfície.

Fem un exemple: Augmentem la superfície fins a 300 pícsels d’amplada, i que l’espai de més que guanyem es reparteixi uniformement pels quatre costats.

4- Indiquem la nova amplada que volem: 300 pícsels
5- En el desplaçament no posem cap valor, com que volem que quedi repartit uniformement pels quatre costats fem clic al botó CENTRE i Gimp calcula el desplaçament que cal. A la secció CAPES escollim l’opció Totes les capes, per mantenir blanc el color de fons de la imatge.
6- Comprovem a la vista prèvia que tenim el que volem, observa com la imatge es veu centrada en la nova superfície que hem guanyat. Si tot és correcte fem clic al botó CANVIA LA MIDA

Aquest és el resultat:

7- La superfície que hem guanyat.

WordPress MU és la versió multi-usuari del Wordpress, per tant ens ofereix les mateixes funcionalitats i exquisiteses a que podem estar acostumats però ho porta a un nivell superior ja que permet automatitzar la creació i gestió de múltiples weblogs individuals, amb la seva pròpia adreça i que estaran ubicats tots sota un mateix site corporatiu.

Cal que quedi clara la diferencia entre el fet que el Wordpress estàndard permet registrar varis usuaris d’un MATEIX i UNIC weblog, i el WordPress MU que permet CREAR VARIS weblogs amb els seus propis usuaris, temes, recursos, límits d’espai, …

Jo ja porto un temps treballant amb el Wordpress MU.

Per una banda en tinc una instal·lació privada que utilitzo en els tallers i formació que imparteixo sobre weblogs.

I actualment estic finalitzant la implantació per un client que necessitava donar eines de publicació webs a tots els seus associats, per fer-ho s’ha instal·lat i personalitzat el Wordpress MU, quan en els propers dies entri en producció donara servei, de cop, a més de 90 weblogs individuals.

Si necessites una solució d’aquest tipus, pots contactar amb mi.

Per exemple, podem desplegar una llauna de refresc i obtenir una imatge de tota la seva superfície.

Per aconseguir aquest efecte nomes ens cal una mica de paciència i moure la llauna lentament (aquí és on ens caldrà la paciència) fent-la rodar seguint el desplaçament del capçal de l’escànner on va el grup digitalitzador.

Posada damunt l’escànner, just abans de començar, observeu l’ús d’un regla que fa de guia per evitar que quan rodem la llauna es desvï.

La llauna rodant damunt l’escànner, just damunt el capçal que digitalitza. Cal que l’anem fent rodar sense avançar el capçal, d’aquesta manera sempre esta digitalitzant la part de la llauna que toca el vidre de l’escànner i crea aquest efecte de desplegament de la llauna.

Com em cansa veure en ofertes de feina i currículums, afirmacions com: “Buenos conocimientos de programación con HTML”, una manca de precisió que a vegades no és res més que el reflex del desconeixement.

La pregunta en aparença no és tant obvia ja que si estem acostumats a un programa com el Photoshop, tenim l’opció necessària dins el menú IMAGEN/Rotar Lienzo/Arbitrario.

Peró en el Gimp, s’hi anem al menú IMATGE no trobem cap opció similar. És que no ho pot fer ?, es clar que si, la diferencia és que el Gimp ho tracta ja directament com una capa i per tant ens cal anar al menú CAPES/Transforma/Gir lliure

L’opció Gir lliure dins un grup del menú principal CAPES.

Quan escollim Gir lliure ens surt un quadre de diàleg en que podem indicar els graus i característiques del gir, però també podem girar lliurement la imatge amb el ratolí mentres aquest quadre de diàleg esta en pantalla. Quan acabem fem clic al botó GIRA

Ja la tenim llesta, ara la guardem o continuem editant-la amb altres eines.

I això és el que passa amb el text, ja que els caràcters sovint son tots d’un sol color que en contrast amb el fons on estant escrits provoca que la compressió JPEG “embruti” els contorns dels caràcters.

Com més elevat és el nivell de compressió més “brut” queda el contorn, especialment si el fons damunt el que hem posat el text, també és d’un sol color.

Quan guardem un fitxer en format JPEG podem escollir el nivell de qualitat final que desitgem i en funció d’això s’ajusta la compressió i pèrdua que realitza un JPEG, d’aquesta manera podem evitar una mica aquesta alteració dels contorns.

A continuació un exemple de la compressió amb tres nivells de qualitat diferents (comptant de 0: poca qualitat, a 100: màxima qualitat).

Com és pot comprovar, a mesura que augmentem el nivell de qualitat del JPEG milloren els contorns del text, no obstant el procés de “destrucció” dels contorns continua existint, malgrat que a l’augmentar la qualitat s’ha dissimulat més. De fet si obrim el JPEG núm. 3, que esta creat amb un nivell de qualitat alt, i l’editem amb el Photoshop o el Gimp, utilitzant l’eina de nivells per forçar els tons, podem observar que al voltant dels contorns del text es mostren pícsels més foscos embrutant les vores del text.

Per tant cal tenir present que això ja queda així i que no te solució, simplement que a més nivell de qualitat més dissimulat, però la destrucció dels contorns existeix igualment, ja que el problema base és que el JPEG es troba amb l’obligació de comprimir superfícies d’un mateix color, tasca per la que no esta dissenyat.

També cal tenir en compte que aquest efecte es notara més amb les imatges a pantalla que impreses en paper, ja que el mateix procés d’impressió dissimula una mica més la situació

De la mateixa manera les tipografies que utilitzem també tindran influencia en la situació, com més gruixudes més dissimulat, com més fines i petites més evident.

Per evitar o minimitzar al màxim aquesta situació tenim diferents opcions:

1- En la mesura que sigui possible, les imatges on hi hagi molt text les guardem en un PNG o GIF enlloc de un JPEG, sobretot si son imatges amb text damunt d’una única superfície de color, i no fotos.

2- Augmentar més la qualitat final en que es guarda el JPEG.

3- Evitar, en la mesura del possible, utilitzar tipografies molt fines i a tamanys petits.

]]> http://www.danielribes.com/weblog/2008/11/les-imatges-jpeg-i-els-textos/feed/ http://www.danielribes.com/weblog/2008/11/curs-edicio-webs-a-la-universitat-pompeu-fabra/ http://www.danielribes.com/weblog/2008/11/curs-edicio-webs-a-la-universitat-pompeu-fabra/#comments Mon, 10 Nov 2008 21:11:26 +0000 admin http://www.danielribes.com/weblog/?p=61 Avui he començat a impartir una nova edició del curs d’edició de pagines web adreçat al personal docent de la UPF. És un curs d’introducció dissenyat per ensenyar els conceptes bàsics d’edició de continguts web, creació d’una estructura web i optimització d’imatges.

L’objectiu és que els participants en el curs (professors i investigadors) de la universitat, adquireixin els coneixements i l’autonomia bàsica per publicar i mantenir els seus propis continguts web pel material docent, webs de departament, …

Ja fa temps (prop de quatre anys) que regularment imparteixo aquest format de curs, un encàrrec de formació fet a mida del client i que ha anat evolucionant al ritme d’Internet i de les necessitats i objectius de la mateixa universitat.

La primera edició es va fer utilitzant Dreamweaver i Photoshop com a eines base de treball, l’edició d’avui ja es fa utilitzant programari de codi obert com el GIMP i es parla de gestors de continguts, edició de weblogs i recursos web (xarxes social, serveis web, …) tot pensat per oferir als docents eines i recursos per utilitzar en la seva tasca formativa.

Per Windows:

Evidentment l’opció més complerta és l’Adobe Acrobat. Permet crear-los, editar-los, optimitzar-los, crear formularis, …

També podem instal·lar-nos el programari gratuït i de codi obert PDFCreator, que ens permet crear un PDF des de qualsevol programa del nostre ordinador

Si treballem amb l’OpenOffice, podem exportar qualsevol document a PDF, simplement accedint al menú FITXER/Exporta com a PDF …

Per altre banda si a més a més de crear-los, ens cal realitzar algun tipus d’edició/manipulació, per Windows també hi ha eines comercials com el NitroPDF o l’Expert PDF, amb funcionalitats similars a l’Adobe Acrobat.

Per Mac OS X:

Des de fa temps que el sistema operatiu d’Apple treballa nativament amb fitxers PDF, es a dir, que tot ve de serie. Des de l’opció Imprimir de qualsevol programa, tenim accés a generar un PDF.

En un proper escrit comentaré les opcions per GNU/Linux (més enllà de l’OpenOffice).

El format PDF era un dels millors candidats, precisament per reunir totes aquestes característiques, no obstant també en tenia d’altres que podien entorpir l’objectiu principal: “La conservació a llarg termini”

El resultat va ser la creació d’un nou format (o millor dit un subformat) a partir del PDF original, aquest nou format el coneixem com a PDF/A i és una especificació variant del PDF 1.4 (la versió utilitzada a l’època de l’Acrobat 5)

Convertit en estàndard ISO (ISO 19005-1) des del setembre del 2005, el format PDF/A te els elements essencials per gestionar els documents des d’un punt de vista de conservació i arxivística.

No es tracta d’un format amb noves característiques sinó que més aviat el que fa és prohibir o evitar aspectes d’un PDF tradicional i que podrien afectar al seu accés i manipulació al cap d’uns anys.

Per exemple un PDF/A no admet ni vídeo ni àudio, com si ho fa un PDF. Tampoc te en compte elements de revisió i treball col·laboratiu, es a dir, un PDF/A s’assegura que els continguts i estructura del document no contindran elements molt condicionats tecnologicament i que en uns anys podrien haver variat i per tant dificultar la seva lectura i ús.

Programes que poden generar documents PDF/A

• Adobe Acrobat, des de la versió 8
• OpenOffice, des de la versió 2.4
• Microsoft Office 2007 mitjançant el seu plug-in per GuardarComPDF

• PDFBox - Java PDF Library
• iText - Java Library
• PDF PHP - Una class per PHP
• FPDF - Una class per PHP