All posts in Disseny

Captura-Save-for-Web

Instal·lant el paquet gimp-plugin-registry disposarem d’una sèrie de plugins força interessants per al Gimp:
sudo apt-get install gimp-plugin-registry

La imatge es correspon al Save for Web.

Destaquem

* Contact Sheet:
Genera un full de contacte de les imatges d’una carpeta.

* David’s Batch Processor (1.1.7):
Un senzill processador d’imatges desatès (batch) per al Gimp.

* Fix-CA (3.0.2):
Corregeix aberracions cromàtiques en fotografies.

* Liquid Rescale (0.4.0-4):
Millora el reescalat d’imatges.

* Save for Web (0.28.5):
Permet experimentar en diferents formats com quedarà l’arxiu i visualitzar prèviament el resultat i conèixer la mida de l’arxiu resultant.

* Separate+ (0.5.1):
Separació de colors RGB i exportació a CMYK.

* Wavelet Denoise (0.2-beta):
Reducció de soroll en imatges.

La relació de plugins la trobareu a http://packages.ubuntu.com/jaunty/gimp-plugin-registry

En una plana HTML, si volem un salt de pàgina en una posició concreta del document, afegirem l’estil CSS page-break-before:
h1 {
font-size: 3em;
page-break-before: always;
}

Aquest estil indica al navegador que quan s’imprimeixi la plana, sempre que trobi una capçalera principal H1, executi un salt de pàgina abans d’imprimir el contingut d’aquest.

Per sol·lucionar el problema de tenir la primera plana en blanc per un salt de pàgina provocat per la primera capçalera del document, emprarem la pseudo-classe :first-child
h1:first-child {
page-break-before: auto;
}

Establint el valor per omissió que te la propietat page-break-before per al primer element H1 del document.

bring-down-IE6

S’ha iniciat la campanya que tot creador de web estava esperant. La petició als navegants que empren Internet Explorer 6 que es passin a la versió 7 o 8 o qualsevol altre navegador que compleixi amb els estandards W3C.

No es tracta d’una campanya anti-Microsoft, l’organtizar la mateixa .NET Magazine. Si calculèssim la d’hores que es perden testejant que les planes web es visualitzin correctament en aquest navegador que no compleix la normativa, la quantitat seria astronòmica.

A la plana de la campanya It’s time to unite Bring Down IE6 fan una crida per a afegir el logotip i enllaçar al lloc web de la campanya.

Webmasovers del món, uniu-vos!

Codi a implementar per a que s’avisi als navegants que estan emprant IE6 que s’actualitzin:

$.browser.msie6 = $.browser.msie && /MSIE 6.0/i.test(window.navigator.userAgent) && !/MSIE 7.0/i.test(window.navigator.userAgent);
if (jQuery.browser.msie6)
{
alert("Esteu navegant amb una versió antiga i descontinuada d'Internet Explorer. Podeu actualitzar-vos a la versió 7 o navegar en català amb el Firefox.");
}

scrollbar

Modificant els CSS d’una plana, aconseguirem canviar el color de les barres d’scroll en navegadors Internet Explorer.


body {
scrollbar-arrow-color: #464646;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-darkshadow-color: #999999;
scrollbar-face-color: #D4D0C8;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #CCCCCC;
scrollbar-track-color: #e6e6e6;
}

Per a Firefox no està habilitada aquesta possibilitat, ni que sigui via JavaScript

document.body.style.scrollbarArrowColor="green";

Avui ha estat alliberada la versió 1.1.2 de la fantàstica eina UniConvertor

uniconv --help

UniConvertor 1.1.2

USAGE: uniconv [INPUT FILE] [OUTPUT FILE]

Converts one vector graphics format to another using sK1 engine.
sK1 Team (http://sk1project.org), copyright (C) 2007,2008 by Igor E. Novikov

Allowed input formats:
AI - Adobe Illustrator files (postscript based)
CDR - CorelDRAW Graphics files (7-X3,X4 versions)
CDT - CorelDRAW templates files (7-X3 versions)
CCX - Corel Compressed Exchange files
CMX - Corel Presentation Exchange files (CMX1 format)
SVG - Scalable Vector Graphics files
FIG - XFig files
CGM - Computer Graphics Metafile files
AFF - Draw files
WMF - Windows Metafile files
SK - Sketch/Skencil files
SK1 - sK1 vector graphics files

Allowed output formats:
AI - Adobe Illustrator files (postscript based)
SVG - Scalable Vector Graphics files
CGM - Computer Graphics Metafile files
WMF - Windows Metafile files
SK - Sketch/Skencil files
SK1 - sK1 vector graphics files

Example: uniconv drawing.cdr drawing.svg

Aquesta eina permet la conversió d’arxius en formats propietaris a l’standard obert SVG.

Encara no funciona amb el 100% dels arxius CorelDraw, però resulta interesant veure com evoluciona i poser recuperar feina feta antigament amb programari propietari.

structure-html5

Guillem Alsina (guillem@imatica.org) – Nous tags que permeten millorar l’estructura de la pàgina i refinar la introducció de vídeo i àudio gràcies a l’èxit de serveis com YouTube.

El World Wide Web Consortium (W3C), l’organisme internacional encarregat d’establir els estàndards de la web, ha publicat les primeres dades de la cinquena versió del llenguatge HTML. Per a aquells lectors que no ho sàpiguen, l’HTML és un llenguatge de descripció de dades mitjançant etiquetes que constitueix la base de les pàgines web, ja que aquestes -i a més de poder emprar altres elements com són animacions en Flash, imatges JPEG o programes en Java- s’escriuen en HTML per a què qualsevol navegador les pugui entendre. Per a això, l’HTML (Hypertext Markup Language) és independent de plataforma.

La base de l’actual versió de l’HTML ve del 1997, amb una petita modificació en el 2001 que bàsicament retocava alguns aspectes puntuals i que es coneix com a HTML 4.01 . Deu anys són molts per al món de la informàtica, i la Web i el que en ella s’hi publica han avançat prou com per a necessitar una nova revisió del llenguatge que els serveix de base. En l’esborrany d’aquesta versió 5 de l’HTML s’hi està treballant des del 2004.

Aquesta setmana la publicació en línia A List Apart ha publicat un article explicatiu de les novetats que es poden trobar en el nou HTML, escrit per Lachlan Hunt, desenvolupador web i membre del comitè que treballa en l’elaboració de la propera versió d’aquest estàndard, pel que es tracta d’informació de primera mà.

L’objectiu d’aquesta nova versió és proporcionar a la comunitat de desenvolupadors un entorn més còmode per moure’s, que els permeti oferir noves funcionalitats i més interactivitat als internautes.

Entre les novetats més destacades, podem esmentar els nous tags per descriure estructures que fins ara només es descrivien mitjançant tags DIV. Entre aquestes es troben, per exemple, la barra de navegació nav o la barra lateral vertical aside, fins ara es podia construir com div id=”sidebar”.

També en l’apartat multimèdia hi trobem novetats, degut al gran èxit dels serveis com YouTube, i que no són només emprats pels usuaris finals, ja que moltes empreses pengen vídeos en aquests serveis per després encastar-los en les seves pròpies pàgines. Els nous tags de l’HTML 5 permeten especificar dades com ara els còdecs necessaris per reproduir un fitxer i de quin tipus és el contingut, si vídeo o àudio.

Juntament amb la definició de l’HTML 5 també s’està fent el mateix amb l’XHTML 5 (Extensible HyperText Markup Language), que no és res més que el mateix HTML però complint amb totes les característiques de l’XML i, per tant, encara més estandarditzat.

Per a la realització d’aquest esborrany s’ha comptat amb la col·laboració dels representants de les quatre principals companyies del món dels navegadors web: Apple (Safari), Mozilla (Firefox), Opera i Microsoft (Internet Explorer), que han aportat els seus suggeriments i idees, així com també diverses organitzacions i particulars que han estat considerats experts d’interès per al grup de treball.

Cal destacar el fet que el document en el qual es basa aquest article és encara només un esborrany de treball, i per tant les especificacions que aquí s’han esmentat poden variar en un futur proper.

Més informació:

Document de treball del W3C amb l’especificació de l’HTML 5
http://www.w3.org/html/wg/html5/
i sobre la polèmica habitual en la creació d’estandards:
http://www.zeldman.com/2007/08/15/what-crisis/

cantonades-arrodonides

Una de les funcionalitats més vistoses de la propera CSS3 serà l’arrodoniment de les cantonades. Això ens estalviarà als dissenyadors de llocs web un munt de temps i als administradors de sistemes un munt d’ample de banda en imatges i codi que dibuixen aquest arrodoniment.

Doncs bé, abans de que arribi la CSS3, els desenvolupadors de webs orientades al codi obert, podem fer servir algunes de les CSS Mozilla Extensions per aconseguir l’objectiu.

Amb aquest codi, aconseguim el resultat de la dreta:
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px

Així que desde navegadors tant populars com Mozilla, Firefox, Swiftweasel i d’altres, podrem anticiparnos a la CSS3. Amb navegadors tipus Microsoft Internet Explorer es veuran les catonades quadrades.